/* Modern glass and motion layer, loaded last on top of glass-theme.css.
   Same rules as motion.css: nothing starts hidden, no animation delays, and every
   animation is off under prefers-reduced-motion. Colors stay black/graphite/gold. */

/* Ambient light: glass only reads as glass when there is light behind it. */
html[data-theme] body:is([data-role="personal"], [data-role="aluno"])::before {
  background:
    radial-gradient(60% 45% at 85% 0%, #e9be2438, transparent 70%),
    radial-gradient(55% 42% at 0% 80%, #b8862a26, transparent 70%),
    radial-gradient(42% 32% at 15% 15%, #7083a81c, transparent 70%),
    radial-gradient(50% 40% at 100% 100%, #e9be2412, transparent 70%);
}
html[data-theme="light"] body:is([data-role="personal"], [data-role="aluno"])::before {
  background:
    radial-gradient(60% 45% at 85% 0%, #f3cf4a40, transparent 70%),
    radial-gradient(55% 42% at 0% 80%, #e8b85a2a, transparent 70%),
    radial-gradient(42% 32% at 15% 15%, #a9bbd93a, transparent 70%);
}

/* Glass tokens: more translucent fill, brighter top edge, deeper soft shadow. */
html[data-theme] body:is([data-role="personal"], [data-role="aluno"]) {
  --glass-fill: #181b23a8;
  --glass-light: #ffffff17;
  --glass-edge: #f1e3b045;
  --glass-shadow: #00000059;
  --glass-highlight: #ffffff26;
  --glass-gold-pill: linear-gradient(145deg, #fff3b8 0%, #ffd60a 48%, #e0a800 100%);
  --glass-gold-glow: #f5c40073;
}
html[data-theme="light"] body:is([data-role="personal"], [data-role="aluno"]) {
  --glass-fill: #ffffffb3;
  --glass-light: #fffffff2;
  --glass-edge: #b39b5c4d;
  --glass-shadow: #6b5a2024;
  --glass-highlight: #ffffffe6;
  --glass-gold-glow: #d9a40052;
}
html[data-theme]
  body:is([data-role="personal"], [data-role="aluno"])
  :is(
    .card,
    .evo-card,
    .library-item,
    .student-cycle-card,
    .student-workout-card,
    .student-week,
    .reference-area-links button,
    .reference-dashboard-tabs,
    .personal-section-tabs,
    .student-tabs,
    .overview-metric,
    .reference-overview-health article,
    .student-results article,
    .student-feature,
    .student-list-button
  ) {
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    inset 0 0 0 1px #ffffff06,
    0 22px 44px -22px var(--glass-shadow),
    0 2px 8px #00000014;
  backdrop-filter: blur(26px) saturate(1.5);
  -webkit-backdrop-filter: blur(26px) saturate(1.5);
}

/* Floating glass dock for the student, with a gold pill that slides to the
   current tab. The nav element persists across renders, so the pill transitions. */
html[data-theme] body[data-role="aluno"] .training-nav {
  bottom: max(10px, env(safe-area-inset-bottom));
  width: min(calc(100% - 24px), 540px);
  min-height: 0;
  padding: 7px;
  gap: 4px;
  border: 1px solid var(--glass-edge);
  border-radius: 28px;
  background: linear-gradient(180deg, var(--glass-light), transparent 65%), var(--glass-fill);
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    0 20px 44px -14px #000000a6;
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  isolation: isolate;
}
html[data-theme="light"] body[data-role="aluno"] .training-nav {
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    0 18px 40px -16px #5c4a1440;
}
html[data-theme] body[data-role="aluno"] .training-nav::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 7px auto 7px 7px;
  width: calc((100% - 26px) / 4);
  border-radius: 21px;
  background: var(--glass-gold-pill);
  box-shadow:
    inset 0 1px 0 #ffffffa6,
    0 8px 20px -6px var(--glass-gold-glow);
  translate: calc(var(--rafit-tab, 0) * (100% + 4px)) 0;
  opacity: var(--rafit-tab-shown, 0);
  pointer-events: none;
}
html[data-theme] body[data-role="aluno"] .training-nav:has(> button[aria-current="page"]) {
  --rafit-tab-shown: 1;
}
html[data-theme]
  body[data-role="aluno"]
  .training-nav:has(> button:nth-child(2)[aria-current="page"]) {
  --rafit-tab: 1;
}
html[data-theme]
  body[data-role="aluno"]
  .training-nav:has(> button:nth-child(3)[aria-current="page"]) {
  --rafit-tab: 2;
}
html[data-theme]
  body[data-role="aluno"]
  .training-nav:has(> button:nth-child(4)[aria-current="page"]) {
  --rafit-tab: 3;
}
html[data-theme] body[data-role="aluno"] .training-nav button.secondary {
  position: relative;
  z-index: 1;
  min-height: 54px !important;
  border-radius: 21px;
  background: transparent;
}
html[data-theme] body[data-role="aluno"] .training-nav button[aria-current="page"] {
  background: transparent;
  color: #1b1600;
}
/* Without :has() the pill cannot be placed, so the active tab keeps its own fill. */
@supports not selector(:has(*)) {
  html[data-theme] body[data-role="aluno"] .training-nav button[aria-current="page"] {
    background: var(--glass-gold-pill);
  }
}

/* The personal's phone menu becomes the same floating dock. */
@media (max-width: 760px) {
  html[data-theme] body[data-role="personal"] .personal-sidebar {
    inset: auto 10px max(10px, env(safe-area-inset-bottom));
    width: auto;
    padding: 6px;
    border: 1px solid var(--glass-edge);
    border-radius: 26px;
    background: linear-gradient(180deg, var(--glass-light), transparent 65%), var(--glass-fill);
    box-shadow:
      inset 0 1px 0 var(--glass-highlight),
      0 20px 44px -14px #000000a6;
    backdrop-filter: blur(28px) saturate(1.6);
    -webkit-backdrop-filter: blur(28px) saturate(1.6);
  }
  /* :root matches the light surface rule in glass-theme.css, which boxes these buttons. */
  :root[data-theme] body[data-role="personal"] .personal-sidebar button {
    border-radius: 20px;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  html[data-theme] body[data-role="personal"] .personal-sidebar button[data-mobile-active="true"] {
    background: var(--glass-gold-pill);
    color: #1b1600;
    box-shadow:
      inset 0 1px 0 #ffffffa6,
      0 8px 20px -6px var(--glass-gold-glow);
  }
}
@media (min-width: 761px) {
  html[data-theme] body[data-role="personal"] .personal-sidebar {
    background: linear-gradient(180deg, var(--glass-light), transparent 40%), var(--glass-fill);
    border-right: 1px solid var(--glass-edge);
    backdrop-filter: blur(28px) saturate(1.5);
    -webkit-backdrop-filter: blur(28px) saturate(1.5);
  }
}

/* Selected segment in Painel/Comercial gets the same gold pill. */
html[data-theme]
  body[data-role="personal"]
  :is(.reference-dashboard-tabs, .personal-section-tabs)
  button[aria-pressed="true"] {
  background: var(--glass-gold-pill);
  color: #1b1600;
  box-shadow:
    inset 0 1px 0 #ffffffa6,
    0 8px 20px -8px var(--glass-gold-glow);
}

/* Assessment result: the figure stands on a soft holographic platform. The figure
   is a flat render, so the turn below reads as a turntable, not a 3D model. */
.assessment-hero figure {
  display: grid;
  justify-items: center;
  perspective: 1000px;
}
.assessment-hero figure > .assessment-body-figure {
  grid-area: 1 / 1;
}
.assessment-hero figure > figcaption {
  grid-area: 2 / 1;
}
.assessment-hero figure::before {
  content: "";
  grid-area: 1 / 1;
  align-self: end;
  z-index: 1;
  width: 78%;
  aspect-ratio: 6 / 1;
  margin-bottom: 14px;
  border-radius: 50%;
  border: 1px solid #f5c40070;
  background: radial-gradient(closest-side, #ffd60a55, #f5c40018 60%, transparent);
  box-shadow:
    0 0 18px #f5c40045,
    inset 0 0 12px #ffd60a40;
  mix-blend-mode: screen;
  pointer-events: none;
}
html[data-theme="dark"] .assessment-hero .assessment-body-render {
  mix-blend-mode: screen;
}
/* The page heading inherited the dark theme's white text and vanished in Claro. */
html[data-theme="light"] body[data-role="aluno"] .assessment-page-heading :is(h1, p) {
  color: #202630;
}
:root[data-theme="light"] .assessment-hero figure::before {
  border-color: #b9890066;
  background: radial-gradient(closest-side, #d9a40040, #d9a40012 60%, transparent);
  box-shadow: 0 0 16px #d9a40030;
  mix-blend-mode: multiply;
}

@media (prefers-reduced-motion: no-preference) {
  /* Presses compress a little; long transitions never gate an action. */
  html[data-theme] body:is([data-role="personal"], [data-role="aluno"]) :is(button, a, summary) {
    transition:
      background-color 120ms ease,
      border-color 120ms ease,
      box-shadow 160ms ease,
      color 120ms ease,
      translate 180ms ease,
      scale 120ms ease;
  }
  html[data-theme]
    body:is([data-role="personal"], [data-role="aluno"])
    :is(button, summary):active:not(:disabled) {
    scale: 0.97;
  }
  html[data-theme] body[data-role="aluno"] .training-nav::before {
    transition:
      translate 340ms cubic-bezier(0.3, 1.3, 0.45, 1),
      opacity 160ms ease;
  }

  /* Cards lift under a mouse pointer; touch screens keep them still. */
  @media (hover: hover) and (pointer: fine) {
    html[data-theme]
      body:is([data-role="personal"], [data-role="aluno"])
      :is(
        .student-list-button,
        .reference-area-links button,
        .student-workout-card,
        .overview-metric,
        .library-item
      ) {
      transition:
        translate 200ms ease,
        box-shadow 200ms ease,
        border-color 200ms ease,
        background-color 120ms ease;
    }
    html[data-theme]
      body:is([data-role="personal"], [data-role="aluno"])
      :is(
        .student-list-button,
        .reference-area-links button,
        .student-workout-card,
        .overview-metric,
        .library-item
      ):hover {
      translate: 0 -3px;
      border-color: #e9c53570;
      box-shadow:
        inset 0 1px 0 var(--glass-highlight),
        0 28px 48px -22px var(--glass-shadow),
        0 0 0 1px #e9c53524;
    }
  }

  /* The progress stroke draws itself; the percentage text is visible throughout. */
  html[data-theme] body[data-role="aluno"] .student-ring-value {
    animation: rafit-ring-draw 900ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  @keyframes rafit-ring-draw {
    from {
      stroke-dasharray: 0 100;
    }
  }

  /* Today's day breathes twice, then rests. */
  html[data-theme] body[data-role="aluno"] .student-week [aria-current="date"] {
    animation: rafit-today-glow 1400ms ease-in-out 2;
  }
  @keyframes rafit-today-glow {
    50% {
      box-shadow:
        0 0 0 4px #f5c40026,
        0 10px 26px -6px var(--glass-gold-glow);
    }
  }

  /* Selected menu items and segments settle in with a small spring. */
  html[data-theme] body[data-role="personal"] .personal-sidebar button[data-mobile-active="true"],
  html[data-theme] body[data-role="personal"] .personal-sidebar button[aria-current="page"],
  html[data-theme]
    body[data-role="personal"]
    :is(.reference-dashboard-tabs, .personal-section-tabs)
    button[aria-pressed="true"] {
    animation: rafit-pop 280ms cubic-bezier(0.3, 1.4, 0.5, 1);
  }
  @keyframes rafit-pop {
    from {
      scale: 0.92;
    }
  }

  /* Dialogs rise into place over a backdrop that fades in. */
  html[data-theme] body dialog[open] {
    animation: rafit-dialog-rise 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  html[data-theme] body dialog[open]::backdrop {
    animation: rafit-backdrop-in 220ms ease-out;
  }
  @keyframes rafit-dialog-rise {
    from {
      opacity: 0.6;
      translate: 0 12px;
      scale: 0.97;
    }
  }
  @keyframes rafit-backdrop-in {
    from {
      opacity: 0.2;
    }
  }

  /* Disclosures unfold instead of snapping open. */
  html[data-theme]
    body:is([data-role="personal"], [data-role="aluno"])
    details[open]
    > :not(summary) {
    animation: rafit-unfold 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  @keyframes rafit-unfold {
    from {
      opacity: 0.6;
      translate: 0 -6px;
    }
  }

  /* Opening a result turns the figure a full 360° once, while the platform glows. */
  .assessment-hero .assessment-body-figure {
    transform-origin: 50% 50%;
    animation: rafit-body-turn 1800ms linear;
  }
  /* A flat render is edge-on at 90° and 270°; a brief holographic flare there
     reads as light passing over the figure instead of a thin card. */
  @keyframes rafit-body-turn {
    from {
      transform: rotateY(0deg);
      filter: none;
      animation-timing-function: cubic-bezier(0.55, 0, 1, 0.75);
    }
    25% {
      transform: rotateY(90deg);
      filter: brightness(1.7) drop-shadow(0 0 14px #ffd60a);
      animation-timing-function: linear;
    }
    50% {
      transform: rotateY(180deg);
      filter: none;
      animation-timing-function: linear;
    }
    75% {
      transform: rotateY(270deg);
      filter: brightness(1.7) drop-shadow(0 0 14px #ffd60a);
      animation-timing-function: cubic-bezier(0, 0.25, 0.45, 1);
    }
    to {
      transform: rotateY(360deg);
      filter: none;
    }
  }
  .assessment-hero figure::before {
    animation: rafit-platform-glow 1800ms ease-in-out;
  }
  @keyframes rafit-platform-glow {
    40% {
      box-shadow:
        0 0 34px #f5c40080,
        inset 0 0 18px #ffd60a70;
      scale: 1.06;
    }
  }
}

/* Reduced transparency must win over the glass recipe above and in glass-theme.css,
   which out-ranks the older fallback there. */
@media (prefers-reduced-transparency: reduce) {
  :root[data-theme]
    body:is([data-role="personal"], [data-role="aluno"])
    :is(
      .card,
      .evo-card,
      .library-item,
      .student-cycle-card,
      .student-workout-card,
      .student-week,
      .reference-area-links button,
      .reference-dashboard-tabs,
      .personal-section-tabs,
      .student-tabs,
      .overview-metric,
      .reference-overview-health article,
      .student-results article,
      .student-feature,
      .student-list-button,
      .training-nav,
      .personal-sidebar
    ) {
    background: #1c2027;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  :root[data-theme="light"]
    body:is([data-role="personal"], [data-role="aluno"])
    :is(
      .card,
      .evo-card,
      .library-item,
      .student-cycle-card,
      .student-workout-card,
      .student-week,
      .reference-area-links button,
      .reference-dashboard-tabs,
      .personal-section-tabs,
      .student-tabs,
      .overview-metric,
      .reference-overview-health article,
      .student-results article,
      .student-feature,
      .student-list-button,
      .training-nav,
      .personal-sidebar
    ) {
    background: #fff;
  }
}
@media (forced-colors: active) {
  html[data-theme] body[data-role="aluno"] .training-nav::before,
  .assessment-hero figure::before {
    display: none;
  }
  html[data-theme] body[data-role="aluno"] .training-nav button[aria-current="page"] {
    background: Highlight;
    color: HighlightText;
  }
}

/* Personal: "Atividades dos alunos" list on Painel and bell with unread count. */
html[data-theme] body[data-role="personal"] .personal-shell-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}
html[data-theme] body[data-role="personal"] .personal-activity-bell {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  min-width: 0;
  min-height: 0;
  margin: 0 0 0 auto;
  padding: 0;
  border-radius: 16px;
}
.personal-activity-bell svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.personal-activity-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #f5c400;
  color: #1b1600;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}
.personal-activity-count[hidden] {
  display: none;
}
.personal-activity-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.personal-activity-heading h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.personal-activity-heading .actions {
  margin: 0;
}
.personal-activity-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: grid;
  gap: 8px;
}
html[data-theme] body[data-role="personal"] .personal-activity-item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 12px 14px;
  border-radius: 16px;
  text-align: left;
  font-weight: 450;
  color: inherit;
}
html[data-theme] body[data-role="personal"] li[data-unread="true"] .personal-activity-item {
  border-color: #e9c53570;
  background: linear-gradient(90deg, #f5c4001f, transparent 60%), var(--glass-fill);
}
.personal-activity-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--glass-edge);
  color: #f5c400;
}
html[data-theme="light"] .personal-activity-icon {
  color: #8a6a00;
}
.personal-activity-copy {
  display: grid;
  gap: 2px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.personal-activity-copy small {
  opacity: 0.75;
}
.personal-push fieldset {
  border: 0;
  padding: 0;
  margin: 12px 0;
  display: grid;
  gap: 10px;
}
.personal-push legend {
  font-weight: 650;
  margin-bottom: 6px;
}
.personal-push form {
  display: grid;
  gap: 8px;
}

/* Profile photo: same circle as the initials avatar, photo covering it once loaded. */
.profile-photo-frame,
.student-avatar {
  position: relative;
  overflow: hidden;
}
.profile-photo-frame {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border: 1px solid #746936;
  border-radius: 50%;
  background: #302e21;
  color: #ffe071;
  font-size: 17px;
  font-weight: 750;
}
.profile-avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  animation: profile-photo-in 0.35s ease-out;
}
@keyframes profile-photo-in {
  from {
    opacity: 0.4;
    transform: scale(0.94);
  }
}
.profile-photo {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.profile-photo > .profile-photo-frame {
  width: 112px;
  height: 112px;
  font-size: 36px;
}
.profile-photo-copy {
  flex: 1 1 200px;
  min-width: 0;
}
.profile-photo-copy > p:first-child {
  margin-top: 0;
}
.profile-photo-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.student-profile-entry {
  display: flex;
  gap: 14px;
  align-items: center;
}
.student-profile-entry > div {
  flex: 1;
  min-width: 0;
}
.student-profile-entry h2 {
  margin: 0;
}
.student-profile-entry p {
  margin: 2px 0 0;
}
.profile-data {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 16px;
}
.profile-data {
  align-items: baseline;
}
.profile-data dt,
.profile-data dd {
  margin: 0;
}
.personal-context-identity {
  display: flex;
  gap: 12px;
  align-items: center;
}
.personal-context-identity h2 {
  margin: 0;
}
.personal-profile-photo {
  margin: 10px 0;
}
.personal-profile-photo > div {
  margin-top: 12px;
}
html[data-theme="light"] .profile-photo-frame {
  border-color: #c9b25a;
  background: #f6efd2;
  color: #6f5a12;
}
@media (prefers-reduced-motion: reduce) {
  .profile-avatar-img {
    animation: none;
  }
}

/* First-access profile: student form and the personal's review table. */
.self-profile-form {
  display: grid;
  gap: 6px;
  max-width: 420px;
}
.self-profile-form button {
  margin-top: 10px;
  justify-self: start;
}
.self-profile-form .student-small {
  margin: 0 0 4px;
}
.self-profile-review {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95em;
}
.self-profile-review th,
.self-profile-review td {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid #ffffff1a;
}
.self-profile-review tr[data-differs] td:last-child {
  color: #ffe071;
  font-weight: 650;
}
html[data-theme="light"] .self-profile-review th,
html[data-theme="light"] .self-profile-review td {
  border-bottom-color: #0000001a;
}
html[data-theme="light"] .self-profile-review tr[data-differs] td:last-child {
  color: #7a5d00;
}

/* Shared spacing rules (checked in the preview by scripts/layout-scan.browser.js):
   action buttons sit side by side and wrap only when they do not fit; stacked blocks
   keep the common gap. */
.service-notice-actions,
.profile-photo-actions,
.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
}
.service-notice-actions:empty {
  display: none;
}
.service-notice-actions > button,
.card-actions > button {
  margin: 0;
}
.student-account > div > .card + .card,
.student-popup-content .student-account > div > .card + .card {
  margin-top: 16px;
}
/* The push card follows the "Atualizar conta e avisos" button: same gap as between blocks. */
.student-account > .student-refresh + .student-push {
  margin-top: 16px;
}

/* Rest timer: the same compact bar at the bottom inside the exercise window as outside it,
   instead of a bordered block under the window title. */
body[data-role="aluno"] .student-rest-in-dialog {
  position: sticky;
  bottom: 12px;
  left: auto;
  transform: none;
  width: 100%;
  max-width: none;
  margin: 16px 0 0;
  z-index: 3;
}

/* Notification center (iPhone-like): translucent rounded cards, no dividers, unread dot,
   whole card tappable to mark as read, hidden scrollbar. */
.notice-center-count {
  margin: 0 4px 10px;
  font-size: 13px;
  font-weight: 650;
  color: #b8b9b4;
}
.notice-center {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
body[data-role="aluno"] .notice-center > li,
.student-popup-content .notice-center > li {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
.notice-card {
  position: relative;
  padding: 12px 14px 13px;
  border: 0;
  border-radius: 20px;
  background: #ffffff14;
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow: 0 1px 0 #ffffff12 inset;
  transition:
    transform 0.18s ease,
    background 0.18s ease;
}
.notice-card.is-unread {
  background: #ffffff1f;
}
.notice-card:active {
  transform: scale(0.985);
}
.notice-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 12px;
  color: #b8b9b4;
}
.notice-card-app {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(145deg, #ffe071, #c9971a);
  color: #1b1d21;
}
.notice-card-app svg {
  width: 14px;
  height: 14px;
}
.notice-card-source {
  flex: 1;
  min-width: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 650;
}
.notice-card time {
  font-size: 12px;
  white-space: nowrap;
}
.notice-card h3 {
  margin: 0 18px 2px 0;
  font-size: 15px !important;
  font-weight: 700;
  line-height: 1.3;
}
.notice-card .account-notice-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
  color: #e4e4e0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.notice-card-dot {
  position: absolute;
  top: 40px;
  right: 14px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ffd84d;
  box-shadow: 0 0 0 3px #ffd84d33;
}
.notice-card-hit {
  position: absolute;
  inset: 0;
  width: 100%;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
}
.notice-card-hit:focus-visible {
  outline: 3px solid #8cc6ff;
  outline-offset: 2px;
}
.student-notifications-popup {
  scrollbar-width: none;
}
.student-notifications-popup::-webkit-scrollbar,
.student-notifications-popup *::-webkit-scrollbar {
  display: none;
}
.student-notifications-popup [data-account-status] {
  display: none;
}
html[data-theme="light"] .notice-card {
  background: #ffffffb8;
  box-shadow: 0 1px 3px #0000001a;
}
html[data-theme="light"] .notice-card.is-unread {
  background: #fffffff0;
}
html[data-theme="light"] .notice-card .account-notice-body {
  color: #2b2f36;
}
html[data-theme="light"] :is(.notice-card-top, .notice-center-count) {
  color: #5d6470;
}
@media (prefers-reduced-motion: reduce) {
  .notice-card {
    transition: none;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .notice-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #2a2c31;
  }
}
/* Older glass rules style every list item, article and header; the notification card wins. */
html[data-theme] body .notice-center > li {
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-theme] body .notice-center .notice-card {
  padding: 12px 14px 13px !important;
  background: #ffffff14 !important;
}
html[data-theme] body .notice-center .notice-card.is-unread {
  background: #ffffff1f !important;
}
html[data-theme] body .notice-center .notice-card-top {
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
html[data-theme="light"] body .notice-center .notice-card {
  background: #ffffffb8 !important;
}
html[data-theme="light"] body .notice-center .notice-card.is-unread {
  background: #fffffff0 !important;
}

/* Empty status lines (success needs no message) take no space. */
.student-top-sync:empty,
[data-account-status]:empty,
[data-training-message]:empty,
[data-exercise-status]:empty,
[data-overview-status]:empty,
[data-directory-status]:empty {
  display: none;
}

/* Personal bell pop-up: the same cards as tappable buttons. */
html[data-theme] body button.notice-card {
  display: block;
  width: 100%;
  min-height: 0;
  margin: 0;
  text-align: left;
  color: inherit;
  font: inherit;
  border: 0 !important;
  cursor: pointer;
}
button.notice-card > span,
button.notice-card > strong {
  display: block;
}
button.notice-card .notice-card-top {
  display: flex;
}
.notice-card-title {
  margin: 0 18px 2px 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}
.notice-card-app {
  font-size: 13px;
  font-weight: 800;
}
.notice-center-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.notice-center-head .notice-center-count {
  margin: 0 4px;
}
.personal-notifications-popup .personal-push {
  margin-top: 16px;
}
/* Pop-ups opened in the personal panel use the same simple heading (title + ×). */
html[data-theme] body[data-role="personal"] .student-popup-heading-simple {
  grid-template-columns: minmax(0, 1fr) 48px;
}
html[data-theme] body[data-role="personal"] .student-popup-heading-simple > [hidden] {
  display: none !important;
}
.notice-card .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* Bell pop-up in the personal panel: solid sheet and dimmed page, like the student one. */
html[data-theme]
  body[data-role="personal"]
  :is(.personal-notifications-popup, .personal-notifications-history-popup) {
  background: #16181c !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-theme]
  body[data-role="personal"]
  :is(.personal-notifications-popup, .personal-notifications-history-popup)::backdrop {
  background: #000000b3;
  backdrop-filter: blur(6px);
}
html[data-theme="light"]
  body[data-role="personal"]
  :is(.personal-notifications-popup, .personal-notifications-history-popup) {
  background: #f4f5f7 !important;
}

/* Workout feedback: the student's note and the personal's single reply. */
.feedback-list {
  display: grid;
  gap: 12px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.feedback-item {
  padding: 14px 16px;
  border-radius: 16px;
  background: #ffffff0f;
}
.feedback-item header {
  display: grid;
  gap: 2px;
  margin-bottom: 6px;
}
.feedback-item header small {
  color: #b8b9b4;
}
.feedback-body {
  margin: 0;
  white-space: pre-wrap;
}
.feedback-reply {
  margin-top: 10px;
  padding: 10px 12px;
  border-left: 3px solid #ffd84d;
  border-radius: 10px;
  background: #ffd84d14;
}
.feedback-reply span {
  font-size: 12px;
  color: #d8c374;
}
.feedback-reply p {
  margin: 4px 0 0;
  white-space: pre-wrap;
}
.feedback-reply-form {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.feedback-reply-form button {
  justify-self: start;
}
.student-finish textarea {
  width: 100%;
  min-height: 84px;
}
html[data-theme="light"] .feedback-item {
  background: #0000000a;
}
html[data-theme] body .feedback-item > header {
  position: static;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
}

/* Personal student list: photo, first and second name, WhatsApp on the right. */
html[data-theme] body .student-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  padding: 6px 8px 6px 6px;
  border-radius: 18px;
  background: #ffffff0f;
  border: 0;
}
html[data-theme] body .student-row-open {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  margin: 0;
  padding: 4px 6px;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  box-shadow: none;
}
.student-row-open .profile-photo-frame {
  width: 44px;
  height: 44px;
  font-size: 15px;
}
.student-row-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 16px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.student-row-whatsapp {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
}
.student-row-whatsapp svg {
  width: 24px;
  height: 24px;
}
.student-row-whatsapp.is-off {
  background: #ffffff14;
  color: #7d828b;
}
html[data-theme="light"] body .student-row {
  background: #0000000a;
}

/* "← Voltar…" buttons always keep the common gap to what follows them. */
html[data-theme]
  body
  :is(.reference-parent-back, .student-back, .assessment-back, [data-context-back]) {
  margin-bottom: 16px;
}
/* Text right after a button inside a block never touches it. */
html[data-theme] body .card button + p:not(:empty) {
  margin-top: 10px;
}

/* Painel summary: each number opens who is behind it. */
html[data-theme] body button.overview-metric {
  display: grid;
  gap: 4px;
  width: 100%;
  min-height: 0;
  margin: 0;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: transform 0.15s ease;
}
html[data-theme] body button.overview-metric:active {
  transform: scale(0.98);
}
.overview-metric-list {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
html[data-theme] body .overview-metric-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  text-align: left;
  color: inherit;
  font: inherit;
}
.overview-metric-row > span:nth-of-type(1) {
  grid-column: 1;
  font-size: 13px;
  opacity: 0.8;
}
.overview-metric-row > span:last-child {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 20px;
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme] body button.overview-metric {
    transition: none;
  }
}

/* Personal student page: overview first, then one compact section per area (D-108). */
.student-overview .personal-context-identity h2 {
  margin: 0;
}
.student-overview-status {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 4px 0 0;
  font-size: 13px;
}
.student-overview-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 6px;
  padding: 0;
  list-style: none;
}
.student-overview-facts li {
  padding: 6px 10px;
  border-radius: 999px;
  background: #ffffff12;
  font-size: 13px;
}
html[data-theme="light"] .student-overview-facts li {
  background: #0000000d;
}
.student-more {
  margin-top: 8px;
}
.student-more > summary,
.student-section > summary,
.workout-new-exercise > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  cursor: pointer;
  font-weight: 650;
  list-style: none;
}
.student-more > summary::-webkit-details-marker,
.student-section > summary::-webkit-details-marker,
.workout-new-exercise > summary::-webkit-details-marker {
  display: none;
}
.student-more > summary::after,
.student-section > summary::after,
.workout-new-exercise > summary::after {
  content: "›";
  font-size: 22px;
  line-height: 1;
  transition: transform 0.18s ease;
}
.student-more[open] > summary::after,
.student-section[open] > summary::after,
.workout-new-exercise[open] > summary::after {
  transform: rotate(90deg);
}
.student-sections {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
html[data-theme] body .student-section {
  margin: 0;
  padding: 6px 16px;
}
.student-section[open] {
  padding-bottom: 16px;
}
.student-section [data-section-body] > div > .card:first-child {
  margin-top: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .student-more > summary::after,
  .student-section > summary::after {
    transition: none;
  }
}
/* Inside a section the module needs no second card, no extra rules nor a repeated title:
   only the section keeps its outline (D-108). Cards nested inside a module stay as they are. */
html[data-theme]
  body
  :is(.student-section, .student-page-body)
  [data-student-module]
  .card:not([data-student-module] .card .card),
html[data-theme]
  body
  :is(.student-section, .student-page-body)
  [data-student-module]
  .card:not([data-student-module] .card .card)
  > form {
  margin: 4px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
:is(.student-section, .student-page-body)
  [data-student-module]
  .card:not([data-student-module] .card .card)
  > :is(h2, h3):first-child,
:is(.student-section, .student-page-body)
  [data-student-module]
  .card:not([data-student-module] .card .card)
  > button:first-child
  + :is(h2, h3) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* One outline only, everywhere (D-109): a card inside a card, pop-up or section loses
   its outline and becomes a soft tile with room around the text; forms inside cards lose
   their separator rules. Inputs, buttons and notification cards keep their own look. */
html[data-theme] body :is(.card, .student-popup-content, details.card) .card:not(.notice-card) {
  border: 0;
  border-radius: 16px;
  background: #ffffff0a;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 14px 16px;
}
html[data-theme="light"]
  body
  :is(.card, .student-popup-content, details.card)
  .card:not(.notice-card) {
  background: #0000000a;
}
html[data-theme] body :is(.card, .student-popup-content) form {
  border-top: 0;
  border-bottom: 0;
}
/* Boxes inside a card (list items, empty media, recipient picker, notices, badge tiles)
   follow the same rule: soft tile, no outline. A selected badge keeps its gold edge. */
html[data-theme]
  body
  :is(.card, .student-popup-content, details.card)
  :is(.library-item, .reference-media-empty, .personal-recipients, .notice, .feedback-item) {
  border: 0;
  border-radius: 14px;
  background: #ffffff0a;
  box-shadow: none;
  padding: 12px 14px;
}
html[data-theme="light"]
  body
  :is(.card, .student-popup-content, details.card)
  :is(.library-item, .reference-media-empty, .personal-recipients, .notice, .feedback-item) {
  background: #0000000a;
}
html[data-theme]
  body:is([data-role="aluno"], [data-role="personal"])
  .conquista-card:not(:has(input:checked)) {
  border-color: transparent;
}
/* Number tiles and list rows inside cards: soft fill instead of an outline. */
html[data-theme]
  body:is([data-role="aluno"], [data-role="personal"])
  :is(.student-facts, .evo-assessment-values, .reference-summary-facts)
  > div,
html[data-theme] body:is([data-role="aluno"], [data-role="personal"]) .reference-summary-list > li {
  border-color: transparent;
  background: #ffffff0d;
}
html[data-theme="light"]
  body:is([data-role="aluno"], [data-role="personal"])
  :is(.student-facts, .evo-assessment-values, .reference-summary-facts)
  > div,
html[data-theme="light"]
  body:is([data-role="aluno"], [data-role="personal"])
  .reference-summary-list
  > li {
  background: #0000000a;
}

/* Dedicated "Montar treino" page inside Treinos. */
.prescription-builder-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
}
.prescription-builder-head h2 {
  margin: 4px 0 0;
}
/* The page header already names the student: the editor's own title and intro hide. */
.prescription-builder [data-builder-body] .card > [data-editor-title],
.prescription-builder [data-builder-body] .card > [data-editor-title] + p,
.prescription-builder [data-builder-body] .card > [data-import-title],
.prescription-builder [data-builder-body] .card > [data-import-title] + p {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Treinos (D-110): workouts as blocks, full-width "Novo treino", prescription fields. */
.workouts {
  display: grid;
  gap: 14px;
}
.workouts > p:empty {
  display: none;
}
.workouts-new,
.workouts-save,
.workouts-next,
.workouts-paste,
.workouts-more {
  width: 100%;
}
.workouts-list,
.workout-results,
.workout-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.workout-card h3 {
  margin: 0 0 4px;
}
.workout-card p {
  margin: 0 0 6px;
}
.workout-to {
  font-size: 0.9rem;
  color: var(--p-accent);
}
.workout-results li,
.workout-item-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.workout-results li > span {
  flex: 1;
  display: grid;
}
.workout-results small {
  opacity: 0.75;
}
.workout-item-head strong {
  flex: 1;
}
.workout-filters,
.workout-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}
.workout-filters {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.workout-item {
  padding: 12px 0;
}
.workout-item + .workout-item {
  border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}
.workout-form {
  display: grid;
  gap: 12px;
}
.workout-delete {
  color: var(--p-error);
}

/* Pop-up buttons ("Entendi", "Enviar o treino", Cancelar/Confirmar) sit centered under the
   text in both profiles. */
dialog.student-popup .service-notice-actions,
dialog.rafit-confirmation > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

/* Conjugated exercises (bi-set, tri-set, circuit) highlighted with a "CONJUGADO" tag in the
   student's summary and execution. */
.student-conjugado-tag {
  display: inline-block;
  width: fit-content;
  margin: 4px 0 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--glass-gold-pill, #e3c35a);
  color: #17140a;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.student-block-heading .student-conjugado-tag {
  display: block;
}
html[data-theme]
  body:is([data-role="aluno"], [data-role="personal"])
  .student-block-group.student-conjugado {
  border: 1.5px solid #d4af37a6 !important;
  background: linear-gradient(180deg, #d4af3714, #d4af3708);
}
html[data-theme]
  body:is([data-role="aluno"], [data-role="personal"])
  .reference-summary-list
  > li.reference-summary-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding: 12px;
  border: 1.5px solid #d4af37a6;
  border-radius: 16px;
  background: linear-gradient(180deg, #d4af3714, #d4af3708);
}
.reference-summary-group > ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.reference-summary-group > ol > li {
  display: flex;
  gap: 12px;
  align-items: center;
}
html[data-theme="light"]
  body:is([data-role="aluno"], [data-role="personal"])
  .student-block-group.student-conjugado,
html[data-theme="light"]
  body:is([data-role="aluno"], [data-role="personal"])
  .reference-summary-list
  > li.reference-summary-group {
  border-color: #9a7b12a6 !important;
  background: #c9a2270f;
}
html[data-theme]
  body:is([data-role="aluno"], [data-role="personal"])
  .reference-summary-group
  > ol
  > li {
  border-color: transparent;
  background: #ffffff0a;
}
html[data-theme="light"]
  body:is([data-role="aluno"], [data-role="personal"])
  .reference-summary-group
  > ol
  > li {
  background: #ffffffb3;
}

/* Periodization weeks in Treinos (D-111). */
.workout-weeks {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.workout-weeks > li {
  display: grid;
  gap: 8px;
}
.workout-weeks > li + li {
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}

/* Execution: the whole workout on one background; conjugated blocks stand out inside it. */
.student-workout-all {
  display: grid;
  gap: 10px;
}
.student-workout-all > .student-eyebrow {
  margin-top: 4px;
}
.student-block-group {
  padding: 12px;
  border-radius: 16px;
}
.student-block-group .student-block-heading h2 {
  margin: 2px 0 6px;
  font-size: 17px;
}

/* Logo: transparent "RAFit Personal" centered in the header, no dark block around it;
   a graphite variant for the light theme. */
.brand-mark {
  display: block;
  width: 150px;
}
.brand-mark img {
  display: block;
  width: 100%;
  height: auto;
}
.brand-mark .brand-mark-light,
html[data-theme="light"] .brand-mark .brand-mark-dark {
  display: none;
}
html[data-theme="light"] .brand-mark .brand-mark-light {
  display: block;
}
body > header {
  justify-content: center;
}
body > header .brand {
  width: fit-content;
  margin-inline: auto;
}
body > header .brand-name {
  display: none;
}
body > header .environment {
  position: absolute;
  right: 16px;
  bottom: 6px;
}
.sidebar-brand .brand-mark {
  width: 180px;
  margin-inline: auto;
}
.sidebar-brand {
  text-align: center;
}
@media (max-width: 760px) {
  .brand-mark {
    width: 132px;
  }
}

/* Simplified exercise window (D-112): read-only prescription, then load and note. */
.student-prescribed {
  margin: 14px 0;
  padding: 14px 16px;
  border-radius: 16px;
  background: #ffffff0d;
}
html[data-theme="light"] .student-prescribed {
  background: #0000000a;
}
.student-prescribed dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}
.student-prescribed dt {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
}
.student-prescribed dd {
  margin: 2px 0 0;
  font-size: 1.15rem;
  font-weight: 800;
}
.student-prescribed p {
  margin: 12px 0 0;
}
.student-simple-form {
  display: grid;
  gap: 12px;
  margin: 14px 0;
}
.student-simple-form input[name="loadKg"] {
  font-size: 1.2rem;
  font-weight: 700;
}

/* Circuit workouts (D-112): normal/assistant switch and the full-screen assistant. */
.student-mode-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 14px 0;
  padding: 4px;
  border-radius: 999px;
  background: #ffffff12;
}
html[data-theme="light"] .student-mode-toggle {
  background: #0000000d;
}
.student-mode-toggle button {
  border-radius: 999px;
  margin: 0;
}
.student-mode-toggle button[aria-pressed="true"] {
  background: var(--glass-gold-pill, #e3c35a);
  color: #17140a;
  border-color: transparent;
}
/* The active mode is the yellow one (Rodrigo, 05/11): the glass button style hid this highlight,
   so both pills looked off while the normal mode was on. */
html[data-theme] body[data-role] .student-mode-toggle button[aria-pressed="true"] {
  background: #ffd700 !important;
  color: #141414 !important;
  border-color: transparent !important;
  box-shadow: 0 6px 18px #ffd70033 !important;
}
html[data-theme] body[data-role] .student-mode-toggle button[aria-pressed="true"] svg {
  stroke: currentColor;
}
html[data-theme] body[data-role] .student-mode-toggle button[aria-pressed="false"] {
  background: transparent !important;
  box-shadow: none !important;
}
dialog.circuit-assistant {
  position: fixed;
  inset: 0;
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 16px;
  border: 0;
  border-radius: 0;
  background: #0d0d0f;
  color: #f7f7f5;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
}
dialog.circuit-assistant:not([open]) {
  display: none;
}
dialog.circuit-assistant > .assistant-controls {
  align-self: end;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
dialog.circuit-assistant::backdrop {
  background: #000;
}
.assistant-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #e3c35a;
}
.assistant-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  min-height: 0;
  overflow: auto;
}
.assistant-stage h2 {
  margin: 0;
  font-size: clamp(1.5rem, 6vw, 2.4rem);
}
.assistant-where,
.assistant-next {
  margin: 0;
  opacity: 0.8;
}
.assistant-count {
  margin: 0;
  font-size: clamp(5rem, 30vw, 11rem);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #f2d25e;
}
.assistant-stage.work .assistant-count {
  font-size: clamp(3.5rem, 18vw, 7rem);
}
.assistant-reps {
  margin: 0;
  font-size: 2rem;
  font-weight: 800;
}
/* 9:16, the format of the personal's recordings; the height limit keeps the timer and
   the buttons on screen. */
.assistant-video {
  height: min(48dvh, 520px);
  max-width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
}
.assistant-video :is(video, iframe) {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
}
.assistant-novideo {
  display: grid;
  place-items: center;
  height: 100%;
  padding: 16px;
  color: #c9ccd2;
}
.assistant-play {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  font-size: 3rem;
  display: grid;
  place-items: center;
}
.assistant-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Evolution: assessments and progress photos right below the calendar, with the common gap. */
.student-evolution [data-evolution-assessments-preview] {
  margin-bottom: 18px;
}

/* Prescription: space between the search filters and the results, and session settings in an
   even grid (same width per field, inputs aligned at the bottom). */
.workout-search [data-w-results] {
  margin-top: 14px;
}
.workout-results li {
  padding: 10px 0;
}
.workout-results li + li {
  border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}
.workout-session-type {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
  margin-top: 12px;
}
.workout-session-type label {
  display: grid;
  gap: 6px;
  margin: 0;
}
.workout-session-type :is(select, input) {
  width: 100%;
  min-width: 0;
  margin: 0;
}
.workout-session-subtitle {
  margin: 16px 0 0;
  font-weight: 700;
}
@media (min-width: 761px) {
  .workout-session-type {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.workout-session-type + p.muted {
  margin-top: 14px;
}
.workout-search .card-actions > button {
  flex: 1 1 240px;
}
/* Prescription extras: paste and new exercise, each in its own block below the sessions. */
.workout-new-exercise > summary {
  font-size: 1.05rem;
}
:is(.workout-paste-card, .workout-new-exercise) > button {
  width: 100%;
}
.workout-search > h3 + p.muted {
  margin-top: 4px;
}

/* Desktop personal: the sidebar already shows the logo, so the header does not repeat it. */
@media (min-width: 761px) {
  body[data-role="personal"] > header .brand {
    display: none;
  }
}

/* New version notice at the top of the app (both profiles). */
.app-update-banner {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 12px 16px;
  background: #2a2412f2;
  color: #f7f1dc;
  border-bottom: 1px solid #e3c35a66;
}
.app-update-banner p {
  flex: 1 1 260px;
  margin: 0;
}
html[data-theme="light"] .app-update-banner {
  background: #fff6d6f2;
  color: #2b2410;
}
.student-account > .student-push + .student-install {
  margin-top: 16px;
}
.install-in-chrome {
  display: inline-flex;
  margin-top: 10px;
}
.workout-hiit {
  margin-top: 14px;
}
.workout-hiit-add {
  margin-top: 12px;
}

/* HIIT block (D-113): expands on tap, shows the prescription and the play button. */
.student-hiit > summary {
  cursor: pointer;
  list-style: none;
}
.student-hiit > summary::-webkit-details-marker {
  display: none;
}
.student-hiit-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 12px;
}
.student-hiit-facts dt {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
}
.student-hiit-facts dd {
  margin: 2px 0 0;
  font-size: 1.15rem;
  font-weight: 800;
}
.student-hiit-play {
  width: 100%;
  margin: 0 0 6px;
}

/* First-access guide: a gold ring around what to tap and a short bubble; never blocks taps. */
.first-guide-ring {
  position: fixed;
  z-index: 60;
  border: 3px solid #f2d25e;
  border-radius: 18px;
  box-shadow:
    0 0 0 4px #f2d25e40,
    0 0 24px #f2d25e80;
  pointer-events: none;
  transition: all 0.25s ease;
}
@media (prefers-reduced-motion: reduce) {
  .first-guide-ring {
    transition: none;
  }
}
.first-guide-bubble {
  /* Opposite contrast to the page, so it never looks like a card: light gold on the dark
     theme (default), dark with a gold edge on the light theme. */
  --guide-bg: #fff0b3;
  --guide-fg: #2a2208;
  --guide-edge: #ffd700;
  --guide-chip-bg: #2a2208;
  --guide-chip-fg: #ffe27a;
  --guide-glow: #ffd70040;
  position: fixed;
  z-index: 61;
  left: 16px;
  right: 16px;
  max-width: 420px;
  margin-inline: auto;
  padding: 16px 18px;
  border-radius: 18px;
  background: var(--guide-bg);
  color: var(--guide-fg);
  border: 2px solid var(--guide-edge);
  box-shadow:
    0 22px 48px #000000b8,
    0 0 0 6px var(--guide-glow);
  animation: first-guide-in 0.35s ease-out;
}
html[data-theme="light"] .first-guide-bubble {
  --guide-bg: #1b1a14;
  --guide-fg: #fff6d6;
  --guide-edge: #f2d25e;
  --guide-chip-bg: #f2d25e;
  --guide-chip-fg: #1b1a14;
  --guide-glow: #f2d25e33;
}
@keyframes first-guide-in {
  from {
    opacity: 0.55;
    transform: translateY(10px) scale(0.97);
  }
}
@media (prefers-reduced-motion: reduce) {
  .first-guide-bubble {
    animation: none;
  }
}
/* Arrow toward the target. */
.first-guide-bubble::after {
  content: "";
  position: absolute;
  left: var(--arrow-x, 50%);
  width: 16px;
  height: 16px;
  background: var(--guide-bg);
  border: 2px solid var(--guide-edge);
  transform: translateX(-50%) rotate(45deg);
  pointer-events: none;
}
.first-guide-bubble.is-below::after {
  top: -10px;
  border-right: 0;
  border-bottom: 0;
}
.first-guide-bubble.is-above::after {
  bottom: -10px;
  border-left: 0;
  border-top: 0;
}
.first-guide-bubble p {
  margin: 6px 0 10px;
}
.first-guide-count {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--guide-chip-bg);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--guide-chip-fg);
}
.first-guide-ring[hidden],
.first-guide-bubble[hidden] {
  display: none;
}

/* Monthly ranking in Evolução. */
.ranking-me {
  margin: 8px 0 6px;
}
.ranking-detail {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ranking-detail li {
  padding: 4px 10px;
  border-radius: 999px;
  background: #ffffff12;
  font-size: 0.8rem;
}
html[data-theme="light"] .ranking-detail li {
  background: #0000000d;
}
.ranking-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  gap: 6px;
}
.ranking-row {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #ffffff0a;
}
html[data-theme="light"] .ranking-row {
  background: #0000000a;
}
.ranking-row.is-me {
  background: linear-gradient(180deg, #d4af3726, #d4af3712);
  outline: 1.5px solid #d4af37a6;
}
.ranking-pos {
  font-weight: 900;
  color: #e3c35a;
}
.ranking-gap {
  text-align: center;
  opacity: 0.6;
}
.ranking-how {
  margin-bottom: 12px;
}

/* Ranking in Início (below RAFit Conquistas): compact, opens on tap; podium marks. */
.student-ranking-home {
  margin: 16px 0;
}
.student-ranking-home > summary {
  list-style: none;
  cursor: pointer;
}
.student-ranking-home > summary::-webkit-details-marker {
  display: none;
}
.student-ranking-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.student-ranking-me {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ranking-podium {
  list-style: none;
  margin: 12px 0 8px;
  padding: 0;
  display: grid;
  gap: 6px;
}
.ranking-podium li {
  display: grid;
  grid-template-columns: 1.8rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
.ranking-podium li.is-me span {
  font-weight: 800;
}
.ranking-podium small {
  opacity: 0.75;
}
.student-ranking-more {
  font-size: 0.82rem;
  color: #e3c35a;
  font-weight: 700;
}
.student-ranking-home[open] > .evo-ranking {
  margin-top: 12px;
}
.student-ranking-home .evo-ranking .evo-section-heading {
  display: none;
}
.ranking-mark {
  display: inline-grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
}
.ranking-mark svg {
  width: 100%;
  height: 100%;
}
.ranking-mark.gold {
  color: #f2c94c;
  filter: drop-shadow(0 0 6px #f2c94c88);
}
.ranking-mark.silver {
  color: #c9ced6;
}
.ranking-mark.bronze {
  color: #c98a4b;
}
.ranking-row.podium .ranking-pos {
  display: inline-grid;
  place-items: center;
}
/* Expanded: one outline only, and the podium summary is not repeated above the full list. */
html[data-theme]
  body:is([data-role="aluno"], [data-role="personal"])
  .student-ranking-home
  .evo-ranking
  .evo-card {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}
.student-ranking-home .evo-ranking {
  margin: 0;
}
.student-ranking-home[open] .ranking-podium {
  display: none;
}

/* Subtle edges (Rodrigo, 25/10/2026): blocks get a thin neutral outline and almost no top
   shine, closer to flat panels; applies to the student app and the personal panel. */
html[data-theme] body:is([data-role="personal"], [data-role="aluno"]) {
  --glass-edge: #ffffff12;
  --glass-highlight: #ffffff0a;
  --glass-light: #ffffff08;
}
html[data-theme="light"] body:is([data-role="personal"], [data-role="aluno"]) {
  --glass-edge: #0000000f;
  --glass-highlight: #ffffff8c;
  --glass-light: #ffffffb3;
}
/* Older student surfaces had fixed (even !important) outlines; they follow the subtle edge.
   The cycle card keeps its gold fill (D-91) with a softer gold edge and no bright top line. */
html[data-theme]
  body[data-role="aluno"]
  :is(.student-feature, .student-list-button, .student-exercise-row, .student-membership-preview) {
  border-color: var(--glass-edge) !important;
}
html[data-theme] body[data-role="aluno"] :is(.student-feature, .student-list-button) {
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    0 12px 32px var(--glass-shadow) !important;
}
html[data-theme] body[data-role="aluno"] .training-app[data-training-page] .student-cycle-card {
  border-color: #d9c0662e;
  box-shadow:
    inset 0 1px #fff0a50d,
    0 14px 36px #00000020;
}
html[data-theme="light"]
  body[data-role="aluno"]
  .training-app[data-training-page]
  .student-cycle-card {
  border-color: #b8992c33;
}
/* Personal panel ranking. */
.personal-ranking {
  margin-top: 16px;
}
.personal-ranking > summary {
  list-style: none;
  cursor: pointer;
}
.personal-ranking > summary::-webkit-details-marker {
  display: none;
}
.personal-ranking[open] .ranking-podium {
  display: none;
}
.personal-ranking .ranking-list {
  margin-top: 12px;
}
.ranking-sub {
  display: block;
  opacity: 0.7;
  font-size: 0.78rem;
}

/* Painel shortcuts: iPhone-style app icons — gold rounded square, dark line glyph. */
html[data-theme]
  body:is([data-role="personal"], [data-role="aluno"])
  .reference-area-links
  button
  > .area-app-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--glass-gold-pill, linear-gradient(145deg, #fff3b8, #ffd60a 48%, #e0a800));
  color: #17140a;
  box-shadow:
    inset 0 1px 0 #ffffffa6,
    0 6px 16px -6px var(--glass-gold-glow, #f5c40073);
}
html[data-theme]
  body:is([data-role="personal"], [data-role="aluno"])
  .reference-area-links
  .area-app-icon
  .student-icon {
  width: 24px;
  height: 24px;
  stroke-width: 2;
}
/* Phone: the shortcut cards are narrow; keep text only, as before. */
@media (max-width: 760px) {
  html[data-theme]
    body:is([data-role="personal"], [data-role="aluno"])
    .reference-area-links
    button
    > .area-app-icon {
    display: none;
  }
}

/* One yellow (Rodrigo, 25/10/2026): the vivid #ffd700 of the main buttons is the accent of
   both apps — selected tabs, menu, avatars, today, counters, arrows, app icons and ranking.
   The darker gold stays only on the tags (badges/pills such as "PRÓXIMO TREINO"). */
html[data-theme] body:is([data-role="personal"], [data-role="aluno"]) {
  --rafit-yellow: #ffd700;
  --glass-gold-pill: linear-gradient(145deg, #ffe55c 0%, #ffd700 45%, #f5c800 100%);
  --glass-gold-glow: #ffd70066;
}
html[data-theme="dark"] body[data-role="personal"] {
  --p-accent: var(--rafit-yellow);
}
html[data-theme] body[data-role="personal"] .personal-avatar {
  border-color: var(--rafit-yellow);
}
html[data-theme]
  body:is([data-role="personal"], [data-role="aluno"])
  :is(.reference-dashboard-tabs, .personal-section-tabs)
  > button[aria-pressed="true"] {
  /* glass-theme's selector for the commercial tabs is more specific. */
  background: var(--glass-gold-pill) !important;
  border-color: transparent !important;
  color: #151515 !important;
}
html[data-theme] body[data-role="aluno"] .student-week li.is-today {
  background: var(--glass-gold-pill);
  border-color: transparent;
}
html[data-theme]
  body:is([data-role="personal"], [data-role="aluno"])
  :is(#student-top-actions [data-unread], .personal-activity-count) {
  background: var(--rafit-yellow);
  color: #151515;
}
html[data-theme="dark"]
  body:is([data-role="personal"], [data-role="aluno"])
  :is(
    .student-avatar,
    .student-brand-line,
    .student-week-mark,
    .student-list-arrow,
    .ranking-pos,
    .student-ranking-more
  ) {
  color: var(--rafit-yellow);
  border-color: var(--rafit-yellow);
}
html[data-theme] body:is([data-role="personal"], [data-role="aluno"]) .ranking-mark.gold {
  color: var(--rafit-yellow);
  filter: drop-shadow(0 0 6px #ffd70080);
}
html[data-theme] body:is([data-role="personal"], [data-role="aluno"]) .ranking-row.is-me {
  background: linear-gradient(180deg, #ffd7001f, #ffd7000d);
  outline-color: #ffd700a6;
}
/* Computer: the side menu is always on screen, so "← Voltar para o Painel" is redundant
   (Rodrigo, 25/10/2026). Phones keep it. */
@media (min-width: 761px) {
  html[data-theme] body[data-role="personal"] .reference-parent-back[data-parent-back] {
    display: none !important;
  }
}
/* Painel summary: ranking first, then "Seus alunos" and "Anexos recebidos" side by side. */
html[data-theme] body[data-role="personal"] [data-personal-ranking-slot]:not(:empty) {
  display: block;
  margin-bottom: 24px;
}
@media (min-width: 761px) {
  html[data-theme] body[data-role="personal"] [data-overview-summary] .overview-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
}

/* Minimal login (Rodrigo, 25/10/2026): title, Aluno/Personal switch, two fields, "Manter
   conectado", Entrar and a small "Esqueci minha senha" — all on one phone screen. */
body[data-role="login"] .visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
html[data-theme] body[data-role="login"] .login-card {
  max-width: 400px;
  margin-inline: auto;
  padding: 26px 22px 18px;
}
html[data-theme] body[data-role="login"] .login-card > h1 {
  font-size: 28px;
  margin: 0 0 18px;
}
html[data-theme] body[data-role="login"] .login-audience {
  position: relative;
  gap: 4px;
  padding: 4px;
  margin: 0 0 18px;
  border-radius: 999px;
  background: var(--glass-fill, #181b23a8);
  border: 1px solid var(--glass-edge, #ffffff12);
}
html[data-theme] body[data-role="login"] .login-audience label {
  position: relative;
  margin: 0;
  justify-content: center;
  min-height: 42px;
  padding: 8px 10px;
  border: 0;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  background: transparent;
  box-shadow: none;
}
html[data-theme] body[data-role="login"] .login-audience input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
/* Keyboard focus: a thin ring inside the pill, not a thick offset outline. */
html[data-theme] body[data-role="login"] .login-audience label:focus-within {
  outline: 0;
}
html[data-theme] body[data-role="login"] .login-audience label:has(input:focus-visible) {
  box-shadow: inset 0 0 0 2px var(--rafit-yellow, #ffd700);
}
html[data-theme] body[data-role="login"] .login-audience label:has(input:checked) {
  background: var(--glass-gold-pill, #ffd700);
  color: #151515;
  box-shadow: 0 6px 16px -8px var(--glass-gold-glow, #ffd70066);
}
html[data-theme] body[data-role="login"] #login-form > label:not(.remember-device) {
  font-size: 14px;
  margin-bottom: 12px;
}
html[data-theme] body[data-role="login"] #login-form input:is([type="email"], [type="password"]) {
  min-height: 48px;
  margin-top: 6px;
}
html[data-theme] body[data-role="login"] .remember-device {
  align-items: center;
  gap: 10px;
  margin: 4px 0 16px;
  font-size: 14px;
  line-height: 1.3;
}
html[data-theme] body[data-role="login"] .remember-device input {
  width: 20px !important;
  height: 20px;
  min-height: 20px !important;
  margin: 0;
  accent-color: var(--rafit-yellow, #ffd700);
}
html[data-theme] body[data-role="login"] #login-status:empty {
  display: none;
}
html[data-theme] body[data-role="login"] .login-card > .link-button {
  display: block;
  width: auto;
  margin: 12px auto 0;
  padding: 8px 12px;
  min-height: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--rafit-yellow, #ffd700);
  font-size: 14px;
  font-weight: 600;
}
html[data-theme="light"] body[data-role="login"] .login-card > .link-button {
  color: #765b00;
}

/* Datas e meses com só a primeira letra maiúscula ("Outubro de 2026", "Sábado, 25 de outubro"):
   capitalize deixava "Outubro De 2026", fora da norma culta (pedido de Rodrigo, 25/10). */
html[data-theme]
  body
  :is(
    .personal-overview > p:first-child,
    .evo-calendar-card h3,
    .student-calendar-heading h3,
    .agenda-period h3,
    .agenda-calendar .agenda-mini-month,
    .agenda-selected > h3,
    .student-week-heading > span
  ) {
  text-transform: none !important;
}
html[data-theme] body .student-week-heading > span {
  display: inline-block;
}
html[data-theme]
  body
  :is(
    .personal-overview > p:first-child,
    .evo-calendar-card h3,
    .student-calendar-heading h3,
    .agenda-period h3,
    .agenda-calendar .agenda-mini-month,
    .agenda-selected > h3,
    .student-week-heading > span
  )::first-letter {
  text-transform: uppercase;
}

/* Anamnese: perguntas numeradas, resposta do aluno em destaque. */
html[data-theme] body:is([data-role="personal"], [data-role="aluno"]) .anamnesis-answers {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: anamnesis;
}
html[data-theme] body:is([data-role="personal"], [data-role="aluno"]) .anamnesis-answers li {
  counter-increment: anamnesis;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 4px 10px;
  padding: 12px;
  border: 1px solid #ffffff14;
  border-radius: 14px;
  background: #ffffff08;
}
html[data-theme]
  body:is([data-role="personal"], [data-role="aluno"])
  .anamnesis-answers
  li::before {
  content: counter(anamnesis);
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffd700;
  color: #17181b;
  font-size: 13px;
  font-weight: 800;
}
html[data-theme] body:is([data-role="personal"], [data-role="aluno"]) .anamnesis-question {
  color: #b9bcc3;
  font-size: 14px;
  line-height: 1.35;
}
html[data-theme] body:is([data-role="personal"], [data-role="aluno"]) .anamnesis-answer {
  color: #fff3a6;
  font-size: 17px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
html[data-theme="light"]
  body:is([data-role="personal"], [data-role="aluno"])
  .anamnesis-answers
  li {
  border-color: #d6dbe3;
  background: #f6f7f9;
}
html[data-theme="light"] body:is([data-role="personal"], [data-role="aluno"]) .anamnesis-question {
  color: #535d6c;
}
html[data-theme="light"] body:is([data-role="personal"], [data-role="aluno"]) .anamnesis-answer {
  color: #1d2430;
}
html[data-theme] body:is([data-role="personal"], [data-role="aluno"]) .anamnesis-confirmations {
  margin-top: 10px;
  font-size: 13px;
}

/* Intervalo do assistente: próximo exercício em destaque, com prévia pequena em 9:16. */
.assistant-next-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(100%, 420px);
  padding: 12px;
  border: 1px solid #ffffff1f;
  border-radius: 18px;
  background: #ffffff0d;
  text-align: left;
}
.assistant-next-card p {
  display: grid;
  gap: 4px;
  margin: 0;
  min-width: 0;
}
.assistant-next-card span {
  color: #c9ccd2;
  font-size: 0.95rem;
}
.assistant-next-card strong {
  font-size: clamp(1.35rem, 6vw, 1.8rem);
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.assistant-next-video {
  flex: 0 0 auto;
  width: 96px;
  aspect-ratio: 9 / 16;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}
.assistant-next-video :is(video, iframe) {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  pointer-events: none;
}
/* Vídeo na janela do exercício: em pé (9:16), centralizado. */
html[data-theme] body:is([data-role="aluno"], [data-role="personal"]) .exercise-video {
  position: relative;
  width: min(46%, 170px);
  aspect-ratio: 9 / 16;
  margin: 16px auto 8px;
  cursor: pointer;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
}
html[data-theme]
  body:is([data-role="aluno"], [data-role="personal"])
  .exercise-video
  :is(video, iframe) {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
}

/* Podium of the previous month (D-124): crown (1st) or medal (2nd/3rd) on the Início photo. The
   photo circle clips its image, so the mark sits on a wrapper beside it. */
.student-avatar-wrap,
.podium-avatar-wrap {
  position: relative;
  display: inline-grid;
  flex: 0 0 auto;
}
.podium-crown,
.podium-medal {
  position: absolute;
  pointer-events: none;
}
.podium-crown {
  left: 48%;
  top: -34%;
  width: 54%;
  height: 54%;
  transform: rotate(18deg);
  color: #ffd700;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 6px rgba(255, 215, 0, 0.45));
}
.podium-crown svg {
  display: block;
  width: 100%;
  height: 100%;
}
.podium-medal {
  right: -5%;
  bottom: -8%;
  display: grid;
  place-items: center;
  width: 46%;
  height: 46%;
  border: 2px solid #0d0d0d;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}
.podium-medal.silver {
  background: radial-gradient(circle at 32% 28%, #fff, #d4d8dd 45%, #8b929a);
  box-shadow:
    0 0 0 1px #aeb4bb,
    0 2px 6px rgba(0, 0, 0, 0.6),
    0 0 10px rgba(220, 225, 230, 0.4);
  color: #3a3f45;
}
.podium-medal.bronze {
  background: radial-gradient(circle at 32% 28%, #f3c9a0, #cd7f32 45%, #7a4414);
  box-shadow:
    0 0 0 1px #b4702b,
    0 2px 6px rgba(0, 0, 0, 0.6),
    0 0 10px rgba(205, 127, 50, 0.45);
  color: #3b1e06;
}
.podium-popup {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}
.podium-popup .podium-avatar-wrap {
  margin: 56px 0 8px;
}
.podium-popup .podium-avatar {
  width: 112px;
  height: 112px;
  font-size: 38px;
}
.podium-popup .podium-medal {
  font-size: 26px;
}
.podium-popup h2 {
  margin: 0;
}
.podium-popup p {
  margin: 0;
}
.podium-celebration [data-podium-close] {
  display: block;
  margin: 14px auto 0;
}

/* Login / "Verificando conexão e sessão" and the student app are always dark, but the page behind
   them (html) stayed light, so a short screen showed half black, half white (Rodrigo, 04/11). The
   html takes the same graphite and the body fills the viewport. */
html:has(body:is([data-role="login"], [data-role="aluno"])) {
  background: #0f0f10;
  color-scheme: dark;
}
body:is([data-role="login"], [data-role="aluno"]) {
  min-height: 100vh;
  min-height: 100dvh;
}
.podium-tag-option {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}
.podium-tag-option input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

/* Transition messages only appear if the wait is long: a quick opening shows just the dark screen
   with the logo (Rodrigo, 04/11: "Verificando conexão e sessão…" lingered and looked stuck). */
.boot-status,
#training-root > p[role="status"]:only-child {
  opacity: 0;
  animation: boot-status-in 0.25s ease-out 1.6s forwards;
}
@keyframes boot-status-in {
  to {
    opacity: 1;
  }
}
/* No divider line under the title of any pop-up (Rodrigo, 04/11). Several older theme rules set it,
   hence the !important on this single declaration. */
html[data-theme] body[data-role] .student-popup .student-popup-heading {
  border-bottom: 0 !important;
}
html[data-theme] body[data-role] .student-popup.podium-celebration .student-popup-heading {
  box-shadow: none;
}

/* Assistant mode: less empty space, bigger video (Rodrigo, 04/11). The top bar loses the dark band
   inherited from the page header, the paddings shrink, and the 9:16 video takes whatever height is
   left between the title and the timer instead of a fixed 48% of the screen. */
html[data-theme] body dialog.circuit-assistant {
  padding: 6px 16px max(10px, env(safe-area-inset-bottom, 0px));
  gap: 6px;
}
html[data-theme] body dialog.circuit-assistant > .assistant-top {
  min-height: 0;
  padding: 0;
  gap: 8px;
  background: transparent;
  border: 0;
  box-shadow: none;
}
dialog.circuit-assistant .assistant-top .student-icon-button {
  width: 40px;
  height: 40px;
  min-height: 0;
}
.assistant-stage.work {
  justify-content: flex-start;
  gap: 6px;
}
.assistant-stage.work .assistant-video {
  flex: 1 1 0;
  min-height: 0;
  height: auto;
  width: auto;
  max-width: 100%;
}

/* Normal mode: the video space stays 16:9 to fit the layout; "Assistir ao vídeo" opens it 9:16 over the
   whole screen (Rodrigo, 04/11). */
.reference-video-link,
.reference-media-empty {
  width: 100%;
  min-height: 0 !important;
  aspect-ratio: 16 / 9;
  margin: 16px 0 !important;
  padding: 12px !important;
}
button.reference-video-link {
  font: inherit;
  cursor: pointer;
}
.student-popup.video-fullscreen {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  border-radius: 0;
  background: #000;
}
.video-fullscreen .student-popup-content {
  display: grid;
  place-items: center;
  padding: 0 0 max(10px, env(safe-area-inset-bottom, 0px));
}
.video-fullscreen-frame {
  height: calc(100dvh - 90px);
  max-width: 100%;
  aspect-ratio: 9 / 16;
  background: #000;
}
.video-fullscreen-frame :is(video, iframe) {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
}

/* Close "X" everywhere (pop-ups of the student and the personal, exercise window, tutorial, assistant
   and full-screen video): a thin X with a soft smoke gradient behind it instead of a bordered box
   (Rodrigo, 04/11). The smoke follows the text colour, so it works in the light and dark themes. */
html[data-theme] body[data-role] .student-popup .student-popup-close,
html[data-theme] body[data-role] .student-dialog-heading .student-icon-button,
html[data-theme] body[data-role] .student-tour > .student-icon-button,
html[data-theme] body[data-role] dialog.circuit-assistant .assistant-top .student-icon-button {
  display: grid !important;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: inherit !important;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  background: radial-gradient(
    circle at 50% 50%,
    color-mix(in srgb, currentColor 16%, transparent) 0,
    color-mix(in srgb, currentColor 7%, transparent) 48%,
    transparent 72%
  ) !important;
}
html[data-theme] body[data-role] .student-popup .student-popup-close:is(:hover, :focus-visible),
html[data-theme]
  body[data-role]
  .student-dialog-heading
  .student-icon-button:is(:hover, :focus-visible),
html[data-theme] body[data-role] .student-tour > .student-icon-button:is(:hover, :focus-visible),
html[data-theme]
  body[data-role]
  dialog.circuit-assistant
  .assistant-top
  .student-icon-button:is(:hover, :focus-visible) {
  background: radial-gradient(
    circle at 50% 50%,
    color-mix(in srgb, currentColor 26%, transparent) 0,
    color-mix(in srgb, currentColor 11%, transparent) 52%,
    transparent 76%
  ) !important;
}
html[data-theme] body[data-role] .student-popup .student-popup-close:focus-visible,
html[data-theme] body[data-role] .student-dialog-heading .student-icon-button:focus-visible,
html[data-theme] body[data-role] .student-tour > .student-icon-button:focus-visible,
html[data-theme]
  body[data-role]
  dialog.circuit-assistant
  .assistant-top
  .student-icon-button:focus-visible {
  outline: 2px solid #ffd700;
  outline-offset: 2px;
}
:is(
    .student-popup-close,
    .student-dialog-heading .student-icon-button,
    .student-tour > .student-icon-button,
    .assistant-top .student-icon-button
  )
  :is(svg, .close-x-icon) {
  width: 20px;
  height: 20px;
  stroke-width: 1.6;
}
/* Always-dark surfaces keep a light X whatever the theme. */
html[data-theme] body[data-role] dialog.circuit-assistant .assistant-top .student-icon-button,
html[data-theme] body[data-role] .student-popup.video-fullscreen .student-popup-close {
  color: #f7f7f5 !important;
}

/* Rest timer as a centred pop-up with a big countdown (Rodrigo, 04/11): the floating bar and the one
   inside the exercise window both become a card in the middle of the screen over a soft scrim. */
body[data-role="aluno"] .student-rest-floating:not([hidden]) {
  position: fixed;
  inset: 0;
  bottom: auto;
  left: 0;
  top: 0;
  z-index: 140;
  transform: none;
  width: auto;
  max-width: none;
  height: 100dvh;
  margin: 0;
  padding: 24px 20px max(24px, env(safe-area-inset-bottom, 0px));
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: center;
  background: rgba(8, 8, 10, 0.78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff0aa;
}
body[data-role="aluno"] .student-rest-floating .rest-label {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
body[data-role="aluno"] .student-rest-floating .rest-number {
  display: block;
  font-size: clamp(6rem, 38vw, 11rem);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #ffd700;
}
body[data-role="aluno"] .student-rest-floating .rest-number:not(:empty)::after {
  content: " s";
  font-size: 0.32em;
  font-weight: 700;
  color: #fff0aa;
}
body[data-role="aluno"] .student-rest-floating .student-rest-controls {
  width: min(380px, 100%);
  margin: 18px 0 8px;
}
body[data-role="aluno"] .student-rest-floating small {
  max-width: 380px;
  font-size: 12px;
  opacity: 0.85;
}
html[data-theme="light"] body[data-role="aluno"] .student-rest-floating:not([hidden]) {
  background: rgba(255, 248, 220, 0.9);
  color: #665000;
}
html[data-theme="light"] body[data-role="aluno"] .student-rest-floating .rest-number {
  color: #8a6a00;
}

/* Rest pop-up, cleaner: two buttons side by side with room around them, short notes below
   (Rodrigo, 04/11: no alerts switch, alerts come on by default). */
body[data-role="aluno"] .student-rest-floating .student-rest-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: min(360px, 100%);
  margin: 34px 0 22px;
}
body[data-role="aluno"] .student-rest-floating .student-rest-controls button.secondary {
  min-height: 54px;
  padding: 10px 12px;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 700;
}
body[data-role="aluno"] .student-rest-floating .student-rest-controls button:only-child {
  grid-column: 1 / -1;
}
body[data-role="aluno"] .student-rest-floating small {
  max-width: 340px;
  margin: 0 0 8px;
  font-size: 12.5px;
  line-height: 1.55;
  opacity: 0.8;
}
body[data-role="aluno"] .student-rest-floating .rest-alarm-note {
  font-size: 12px;
  opacity: 0.65;
}

/* Student areas as pages (Rodrigo, 06/11/2026 · D-125): the student's hub lists one card per
   area with its title in the vivid yellow and a short hint; each card opens a page of its own
   with a highlighted heading. No stacked sections, no pop-up. Light theme uses a darker gold
   so the titles stay readable on white. */
html[data-theme] body[data-role="personal"] {
  --student-area-title: var(--rafit-yellow, #ffd700);
}
html[data-theme="light"] body[data-role="personal"] {
  --student-area-title: #8a6a00;
}
.student-hub[hidden],
.student-page[hidden] {
  display: none !important;
}
html[data-theme] body[data-role="personal"] .student-hub-more {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  margin-top: 12px;
  padding: 10px 2px 0;
  border: 0;
  border-top: 1px solid #ffffff14;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--student-area-title);
  font-weight: 700;
  text-align: left;
}
html[data-theme="light"] body[data-role="personal"] .student-hub-more {
  border-top-color: #00000014;
}
.student-hub-more > span:first-child {
  flex: 1;
}
.student-hub-more > span:last-child,
.student-section-arrow {
  font-size: 24px;
  line-height: 1;
  color: var(--student-area-title);
}
.student-hub-flag {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--glass-gold-pill);
  color: #151515;
  font-size: 12px;
  font-weight: 700;
}
html[data-theme] body[data-role="personal"] .student-sections {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 10px;
  margin-top: 16px;
}
html[data-theme] body[data-role="personal"] .student-section-link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 72px;
  margin: 0;
  padding: 14px 16px;
  border-left: 3px solid var(--student-area-title);
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition:
    transform 0.16s ease,
    border-color 0.16s ease;
}
html[data-theme] body[data-role="personal"] .student-section-link:hover {
  transform: translateY(-1px);
}
.student-section-text {
  display: grid;
  flex: 1;
  gap: 3px;
}
.student-section-text strong {
  color: var(--student-area-title);
  font-size: 16px;
  font-weight: 750;
}
.student-section-text small {
  font-size: 13px;
  font-weight: 450;
  opacity: 0.72;
}
html[data-theme] body[data-role="personal"] .student-page-head {
  display: block;
  margin: 16px 2px 14px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.student-page-head .personal-eyebrow {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}
html[data-theme] body[data-role="personal"] .student-page-head h2 {
  margin: 0;
  color: var(--student-area-title);
  font-size: clamp(22px, 5vw, 28px);
}
.student-page-part {
  margin-top: 18px;
}
html[data-theme] body[data-role="personal"] .student-page-body :is(h3, h4) {
  color: var(--student-area-title);
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme] body[data-role="personal"] .student-section-link {
    transition: none;
  }
}

/* Student anamnesis as a focused page (D-125): one question block per step, a single main
   button, sent answers listed compactly and opened read-only. */
.student-anamnesis-page .anamnesis-todo {
  border-left: 3px solid var(--rafit-yellow, #ffd700);
}
.student-anamnesis-page .anamnesis-todo h2,
.student-anamnesis-page .anamnesis-sent h2,
.student-anamnesis-page .anamnesis-review h2,
.student-anamnesis-page .anamnesis-review-title,
.student-anamnesis-page fieldset > legend {
  color: var(--rafit-yellow, #ffd700);
}
html[data-theme="light"]
  .student-anamnesis-page
  :is(
    .anamnesis-todo h2,
    .anamnesis-sent h2,
    .anamnesis-review h2,
    .anamnesis-review-title,
    fieldset > legend
  ) {
  color: #8a6a00;
}
.student-anamnesis-page .anamnesis-answer-heading progress {
  width: 100%;
  height: 6px;
  margin-top: 10px;
  accent-color: var(--rafit-yellow, #ffd700);
}
.student-anamnesis-page .anamnesis-primary {
  width: 100%;
  min-height: 52px;
  margin-top: 18px;
  font-size: 16px;
  font-weight: 750;
}
.anamnesis-sent-list {
  display: grid;
  gap: 8px;
  margin: 10px 0;
  padding: 0;
  list-style: none;
}
html[data-theme] body .anamnesis-sent-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 10px 14px;
  border-radius: 16px;
  background: #ffffff0d;
  color: inherit;
  text-align: left;
}
html[data-theme="light"] body .anamnesis-sent-row {
  background: #0000000a;
}
.anamnesis-sent-row > span:first-child {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.anamnesis-sent-row > span:last-child {
  font-size: 22px;
  color: var(--rafit-yellow, #ffd700);
}

/* Pages of a student reload when reopened (06/11/2026): their modules' own "Atualizar"
   buttons are redundant there. The button stays in the DOM because the page uses it. */
html[data-theme]
  body[data-role="personal"]
  .student-page-body
  :is([data-refresh], #refresh-assessments, [data-history-refresh]) {
  display: none !important;
}
html[data-theme] body[data-role="personal"] .service-inbox[hidden] {
  display: none !important;
}
/* Conta do aluno: "Mais opções" abre e fecha (+/−) para poupar espaço; começa fechado (Rodrigo, 07/11/2026). */
html[data-theme] body[data-role="aluno"] .student-account-more {
  margin: 22px 0 16px;
}
html[data-theme] body[data-role="aluno"] .student-account-more > h2 {
  margin: 0 0 10px;
}
html[data-theme] body[data-role="aluno"] .student-account-more .student-fold-toggle.secondary {
  font-size: 15px;
  font-weight: 700;
}
/* Painel has two views now (Resumo · Atividades); "Pendências" was the same list as the
   "pendências de revisão" number (06/11/2026). */
html[data-theme] body[data-role="personal"] .reference-dashboard-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* Lista curta → página do item (06/11/2026, D-126): rows with date, kind and state; the open
   record is shown alone, with its own Voltar (the page's Voltar waits one level). */
.record-index {
  display: grid;
  gap: 8px;
  margin: 12px 0;
  padding: 0;
  list-style: none;
}
html[data-theme] body .record-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #ffffff0d;
  color: inherit;
  text-align: left;
}
html[data-theme="light"] body .record-row {
  background: #0000000a;
}
.record-row-text {
  display: grid;
  flex: 1;
  gap: 2px;
}
.record-row-text strong {
  color: var(--student-area-title, var(--rafit-yellow, #ffd700));
}
.record-row-text small {
  opacity: 0.72;
}
.record-row-arrow {
  font-size: 22px;
  color: var(--student-area-title, var(--rafit-yellow, #ffd700));
}
.record-index[hidden],
.record-index ~ .card[hidden] {
  display: none !important;
}
.record-open
  > :is(p:not([role="status"]):not([aria-live]), .card-actions, button:not(.record-back)),
.record-open .record-extra,
.student-page.record-open > [data-page-back] {
  display: none !important;
}
/* WhatsApp in the student list with a green ring (Rodrigo, 06/11/2026). Without a number the
   ring stays, softer, so the button is recognisable but clearly not active. */
html[data-theme] body[data-role="personal"] .student-row-whatsapp {
  box-shadow: 0 0 0 2px #25d366;
}
html[data-theme] body[data-role="personal"] .student-row-whatsapp.is-off {
  box-shadow: 0 0 0 2px #25d36680;
  color: #25d366b3;
}
/* Recent workouts on the student's info page: three, then "Ver mais". */
.summary-more > summary {
  display: inline-flex;
  margin: 4px 0 8px;
  padding: 8px 14px;
  border: 1px solid #ffffff2e;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 650;
  list-style: none;
}
.summary-more > summary::-webkit-details-marker {
  display: none;
}
.summary-more:not([open]) .less,
.summary-more[open] .more {
  display: none;
}
.summary-more[open] > summary {
  order: 2;
}
/* Matrícula do aluno como ficha. */
.enrollment-record-head {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}
.enrollment-record-head h4 {
  margin: 0;
  font-size: 19px;
}
.enrollment-record-head .student-state {
  justify-self: start;
}
.enrollment-facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(46%, 150px), 1fr));
  gap: 10px;
  margin: 0 0 14px;
}
.enrollment-facts > div {
  padding: 10px 12px;
  border-radius: 14px;
  background: #ffffff0d;
}
html[data-theme="light"] .enrollment-facts > div {
  background: #0000000a;
}
.enrollment-facts dt {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.7;
}
.enrollment-facts dd {
  margin: 3px 0 0;
  font-weight: 650;
}
.management-panel [data-new][hidden] {
  display: none !important;
}
.enrollment-older {
  margin-top: 12px;
}
/* Cadastrar aluno novo (D-128, pré-configurado). */
html[data-theme] body[data-role="personal"] .signup-entry {
  width: 100%;
  margin: 0 0 12px;
  min-height: 52px;
  font-weight: 750;
}
.signup-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 10px;
  margin: 14px 0;
}
html[data-theme] body[data-role="personal"] .signup-choice {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 16px;
  border-left: 3px solid var(--rafit-yellow, #ffd700);
  color: inherit;
  text-align: left;
}
html[data-theme] body[data-role="personal"] .signup-choice[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--rafit-yellow, #ffd700);
}
.signup-choice strong {
  color: var(--student-area-title, var(--rafit-yellow, #ffd700));
  font-size: 16px;
}
.signup-choice small {
  font-size: 13.5px;
  line-height: 1.5;
  opacity: 0.8;
}
.signup-steps {
  display: grid;
  gap: 8px;
  padding-left: 22px;
  line-height: 1.5;
}
.signup-notice {
  border-left: 3px solid var(--rafit-yellow, #ffd700);
}
.personal-signup-area[hidden] {
  display: none !important;
}

/* O botão X de qualquer cabeçalho de janela fica SEMPRE no mesmo canto, com título curto ou longo
   (Rodrigo, 07/11/2026). A regra geral `header { flex-wrap: wrap }` jogava o X para a linha de
   baixo quando o nome do exercício era grande: aqui o cabeçalho nunca quebra linha, o título
   (que pode quebrar em várias linhas) ocupa o espaço que sobra e o X não encolhe nem sai do lugar. */
html[data-theme] body[data-role] :is(.student-dialog-heading, .assistant-top) {
  flex-wrap: nowrap;
  align-items: flex-start;
}
html[data-theme] body[data-role] .student-dialog-heading > :first-child,
html[data-theme] body[data-role] .assistant-top > span {
  flex: 1 1 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
html[data-theme] body[data-role] .student-dialog-heading h2 {
  overflow-wrap: anywhere;
}
html[data-theme]
  body[data-role]
  :is(.student-dialog-heading, .assistant-top)
  > .student-icon-button {
  flex: 0 0 44px;
  margin-left: auto;
}
html[data-theme] body[data-role] .student-popup .student-popup-heading {
  align-items: start;
}
html[data-theme] body[data-role] .student-popup .student-popup-heading h2 {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 44px;
  overflow-wrap: anywhere;
}

/* Um botão sozinho num cartão de treino ocupa a largura toda (antes ficava com metade, colado à
   esquerda). Com dois botões, continuam lado a lado (Rodrigo, 07/11/2026). */
html[data-theme] body[data-role] .student-workout-actions > button:only-child {
  grid-column: 1 / -1;
  width: 100%;
}

/* Modo claro: o cabeçalho de TODO pop-up acompanha o tema. No painel do personal ele ficava preto
   (#18191b, regra escura geral) sobre o corpo claro, ex.: Notificações (Rodrigo, 07/11/2026). O
   aluno já tinha esta regra; aqui vale para qualquer papel. */
html[data-theme="light"] body[data-role] .student-popup .student-popup-heading {
  background: var(--glass-fill, #ffffffc9);
  color: #202630;
  border-color: #cbd1da;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
html[data-theme="light"] body[data-role] .student-popup .student-popup-heading h2 {
  color: #202630;
}
/* Histórico de notificações em página própria (07/11): no painel fica só a entrada. */
html[data-theme] body:is([data-role="personal"]) .notification-history-entry {
  padding: 8px;
}
html[data-theme] body:is([data-role="personal"]) .notification-history-open {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 60px;
  padding: 10px 14px;
  text-align: left;
  justify-content: flex-start;
}
html[data-theme] body:is([data-role="personal"]) .notification-history-open svg {
  flex: none;
  color: #ffd700;
}
html[data-theme="light"] body:is([data-role="personal"]) .notification-history-open svg {
  color: #8a6d00;
}
html[data-theme]
  body:is([data-role="personal"])
  .notification-history-open
  > span:not(.notification-history-arrow) {
  display: flex;
  flex-direction: column;
  flex: 1;
  font-weight: 700;
}
html[data-theme] body:is([data-role="personal"]) .notification-history-open small {
  font-weight: 400;
  opacity: 0.72;
}
html[data-theme] body:is([data-role="personal"]) .notification-history-arrow {
  font-size: 1.6rem;
  line-height: 1;
  opacity: 0.6;
}
html[data-theme] body:is([data-role="personal"]) .personal-notifications-history {
  padding: 0 20px 20px;
}

/* Personal: "Meu perfil" (14/11/2026): data, install the app, sign out */
html[data-theme] body:is([data-role="personal"]) .personal-profile-area {
  display: grid;
  gap: 16px;
  max-width: 720px;
}
html[data-theme] body:is([data-role="personal"]) .personal-profile-area[hidden] {
  display: none;
}
html[data-theme] body:is([data-role="personal"]) .personal-profile-area h2 {
  margin: 0 0 4px;
  font-size: 1.15rem;
}
html[data-theme] body:is([data-role="personal"]) .personal-profile-area .personal-identity {
  display: flex;
  align-items: center;
  gap: 14px;
}
html[data-theme] body:is([data-role="personal"]) .personal-profile-data {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
}
html[data-theme] body:is([data-role="personal"]) .personal-profile-data div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}
html[data-theme] body:is([data-role="personal"]) .personal-profile-data dt {
  opacity: 0.7;
}
html[data-theme] body:is([data-role="personal"]) .personal-profile-data dd {
  margin: 0;
  text-align: right;
  overflow-wrap: anywhere;
}

/* Personal: photo over the initials of the header/profile avatar (14/11/2026) */
html[data-theme] body[data-role="personal"] .personal-avatar {
  position: relative;
  overflow: hidden;
}
html[data-theme] body[data-role="personal"] .personal-profile-photo h2 {
  margin: 0 0 4px;
  font-size: 1.1rem;
}