/* ==========================================================================
   Google Material Design 3 (M3) - System Specifications (m3.material.io)
   Theme: Athletic Dark Gym for Roger Góes Personal Trainer
   - Color Roles: Primary, Secondary, Tertiary, Surface, Containers, Outline
   - Shape Scale: None, Extra Small, Small, Medium, Large, Extra Large, Full
   - Elevation Scale: Level 0 to Level 5 with Ambient & Key Light Shadows
   - Typography Scale: Roboto / Roboto Flex Display, Headline, Title, Body, Label (15 styles)
   - Motion: M3 Emphasized & Standard Easing Curves
   - Components: Top App Bar, Navigation Bar, Navigation Drawer, Segmented Buttons,
                 Chips, Cards, Dialogs, Bottom Sheets, FABs, Switches, State Layers
   ========================================================================== */

:root {
  /* ==================== M3 COLOR SYSTEM (Dark Theme Reference) ==================== */
  /* Primary Tonal Palette (Athletic Energetic Lime Green) */
  --md-sys-color-primary: #8fe825;
  --md-sys-color-on-primary: #123800;
  --md-sys-color-primary-container: #265500;
  --md-sys-color-on-primary-container: #a9f854;
  --md-sys-color-primary-fixed: #a9f854;
  --md-sys-color-primary-fixed-dim: #8fe825;
  --md-sys-color-on-primary-fixed: #072100;
  --md-sys-color-on-primary-fixed-variant: #265500;

  /* Secondary Tonal Palette (M3 Spring Green / Active Indicator Pill Color) */
  --md-sys-color-secondary: #97d792;
  --md-sys-color-on-secondary: #003913;
  --md-sys-color-secondary-container: #1b4f23;
  --md-sys-color-on-secondary-container: #b3f4ad;
  --md-sys-color-secondary-fixed: #b3f4ad;
  --md-sys-color-secondary-fixed-dim: #97d792;
  --md-sys-color-on-secondary-fixed: #002107;
  --md-sys-color-on-secondary-fixed-variant: #1b4f23;

  /* Tertiary Tonal Palette (Cyan / Teal Bio-Energy Accent) */
  --md-sys-color-tertiary: #75d9ce;
  --md-sys-color-on-tertiary: #003733;
  --md-sys-color-tertiary-container: #00504a;
  --md-sys-color-on-tertiary-container: #93f5ea;

  /* Error Tonal Palette */
  --md-sys-color-error: #ffb4ab;
  --md-sys-color-on-error: #690005;
  --md-sys-color-error-container: #93000a;
  --md-sys-color-on-error-container: #ffdad6;

  /* Surface & Tonal Containers (M3 Elevation Hierarchy) */
  --md-sys-color-surface: #111418;
  --md-sys-color-surface-dim: #0e1014;
  --md-sys-color-surface-bright: #373a3f;
  --md-sys-color-surface-container-lowest: #0c0e12;
  --md-sys-color-surface-container-low: #191c20;
  --md-sys-color-surface-container: #1d2025;
  --md-sys-color-surface-container-high: #282b30;
  --md-sys-color-surface-container-highest: #33363b;

  /* Content & Outline Colors */
  --md-sys-color-on-surface: #e1e2e8;
  --md-sys-color-on-surface-variant: #c3c6cf;
  --md-sys-color-outline: #8d9199;
  --md-sys-color-outline-variant: rgba(255, 255, 255, 0.12);
  --md-sys-color-shadow: #000000;
  --md-sys-color-scrim: #000000;
  --md-sys-color-surface-tint: var(--md-sys-color-primary);

  /* Inverse Colors */
  --md-sys-color-inverse-surface: #e1e2e8;
  --md-sys-color-inverse-on-surface: #111418;
  --md-sys-color-inverse-primary: #265500;

  /* ==================== M3 SHAPE SCALE ==================== */
  --md-sys-shape-corner-none: 0px;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px;

  /* ==================== M3 ELEVATION SCALE ==================== */
  --md-sys-elevation-0: none;
  --md-sys-elevation-1: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
  --md-sys-elevation-2: 0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
  --md-sys-elevation-3: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.30);
  --md-sys-elevation-4: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px 0px rgba(0, 0, 0, 0.30);
  --md-sys-elevation-5: 0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px 0px rgba(0, 0, 0, 0.30);

  /* ==================== M3 MOTION & EASING ==================== */
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0.0, 0, 1.0);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1.0);
  --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0.0, 0.8, 0.15);
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0.0, 0, 1.0);
  --md-sys-motion-duration-short: 200ms;
  --md-sys-motion-duration-medium: 300ms;
  --md-sys-motion-duration-long: 500ms;

  /* ==================== M3 STATE LAYERS ==================== */
  --md-sys-state-hover-opacity: 0.08;
  --md-sys-state-focus-opacity: 0.12;
  --md-sys-state-pressed-opacity: 0.12;
  --md-sys-state-dragged-opacity: 0.16;

  /* ==================== LEGACY BRIDGES (Backwards Compatible) ==================== */
  --bg-main: var(--md-sys-color-surface);
  --bg-card: var(--md-sys-color-surface-container);
  --bg-card-hover: var(--md-sys-color-surface-container-high);
  --bg-input: var(--md-sys-color-surface-container-highest);
  --border-color: var(--md-sys-color-outline-variant);
  --border-focus: var(--md-sys-color-primary);

  --primary: var(--md-sys-color-primary);
  --primary-glow: rgba(143, 232, 37, 0.28);
  --primary-hover: #7ad118;
  --primary-gradient: linear-gradient(135deg, var(--md-sys-color-primary) 0%, #2e7d32 100%);
  --accent: var(--md-sys-color-tertiary);
  --accent-glow: rgba(117, 217, 206, 0.25);
  --danger: var(--md-sys-color-error);
  --warning: #f59e0b;

  --text-main: var(--md-sys-color-on-surface);
  --text-muted: var(--md-sys-color-on-surface-variant);
  --text-dim: #8d9199;

  --radius-sm: var(--md-sys-shape-corner-small);
  --radius-md: var(--md-sys-shape-corner-large);
  --radius-lg: var(--md-sys-shape-corner-extra-large);
  --radius-full: var(--md-sys-shape-corner-full);

  --shadow-sm: var(--md-sys-elevation-1);
  --shadow-md: var(--md-sys-elevation-2);
  --shadow-lg: var(--md-sys-elevation-3);

  --font-family: 'Roboto', 'Roboto Flex', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: 'Roboto', 'Montserrat', sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  background-color: var(--md-sys-color-surface-container-lowest);
  color: var(--text-main);
  font-family: var(--font-family);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
}

/* Desktop Presentation Wrapper (Allows phone frame or full-width) */
.device-wrapper {
  width: 100%;
  max-width: 480px;
  height: 100vh;
  background-color: var(--bg-main);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.9);
  transition: all 0.3s ease;
}

@media (min-width: 600px) {
  body {
    padding: 24px;
    background: radial-gradient(circle at 50% 20%, #171d27 0%, #07080b 80%);
  }

  .device-wrapper.device-frame-active {
    height: 900px;
    max-height: 94vh;
    border-radius: 44px;
    border: 10px solid #1a1e27;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.95), 0 0 35px rgba(118, 186, 27, 0.18);
  }

  .device-wrapper:not(.device-frame-active) {
    max-width: 860px;
    height: 94vh;
    border-radius: 20px;
    border: 1px solid var(--border-color);
  }
}

/* ==================== M3 TOP APP BAR ==================== */
.app-top-nav {
  background-color: rgba(17, 20, 24, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 8px 16px;
  height: 64px; /* Official M3 Small/Center-aligned Top App Bar */
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  z-index: 20;
  transition: background-color 0.2s var(--md-sys-motion-easing-standard);
}

.brand-section {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-logo-img {
  width: 38px;
  height: 38px;
  border-radius: var(--md-sys-shape-corner-small);
  object-fit: cover;
  box-shadow: 0 0 12px var(--primary-glow);
  border: 1px solid rgba(143, 232, 37, 0.45);
  transition: transform 0.2s var(--md-sys-motion-easing-standard);
}

.brand-logo-img:hover {
  transform: scale(1.05);
}

.brand-text-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.15;
}

.brand-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #ffffff;
  text-transform: uppercase;
}

.brand-sub {
  font-family: var(--font-heading);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--primary);
  text-transform: uppercase;
}

.top-actions-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-pill-role {
  background: var(--md-sys-color-primary-container);
  border: 1px solid rgba(143, 232, 37, 0.35);
  color: var(--md-sys-color-on-primary-container);
  padding: 6px 14px;
  border-radius: var(--md-sys-shape-corner-full);
  font-size: 0.78rem;
  font-weight: 700;
  font-family: var(--font-heading);
  cursor: pointer;
  transition: all 0.2s var(--md-sys-motion-easing-standard);
}

.btn-pill-role:hover {
  background: var(--primary);
  color: var(--md-sys-color-on-primary);
}

.btn-icon-device {
  background: transparent;
  border: 1px solid var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface-variant);
  width: 38px;
  height: 38px;
  border-radius: var(--md-sys-shape-corner-full);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  transition: all 0.2s var(--md-sys-motion-easing-standard);
}

.btn-icon-device:hover {
  background: rgba(255, 255, 255, var(--md-sys-state-hover-opacity));
  color: var(--md-sys-color-on-surface);
}

.btn-icon-device.active {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border-color: transparent;
}

/* App Body & Scroll Container */
.app-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  padding-bottom: 96px;
  scroll-behavior: smooth;
}

/* Tab Views */
.tab-view {
  display: none;
  animation: fadeIn 0.25s var(--md-sys-motion-easing-standard) forwards;
}

.tab-view.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==================== M3 CARDS & BADGES ==================== */
.card {
  background-color: var(--md-sys-color-surface-container);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-large); /* 16px M3 Shape Large */
  padding: 18px;
  margin-bottom: 16px;
  box-shadow: var(--md-sys-elevation-1);
  transition: transform 0.2s var(--md-sys-motion-easing-standard), box-shadow 0.2s var(--md-sys-motion-easing-standard), border-color 0.2s var(--md-sys-motion-easing-standard);
}

.card:hover {
  box-shadow: var(--md-sys-elevation-2);
  border-color: rgba(255, 255, 255, 0.16);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: var(--md-sys-shape-corner-full); /* M3 Large Badge */
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge-primary {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  border: 1px solid rgba(143, 232, 37, 0.3);
}

.badge-accent {
  background: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
  border: 1px solid rgba(117, 217, 206, 0.3);
}

.badge-warning {
  background: rgba(245, 158, 11, 0.15);
  color: var(--warning);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.badge-danger {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
  border: 1px solid rgba(255, 180, 171, 0.35);
}

.badge-outline {
  border: 1px solid var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface-variant);
  background: transparent;
}

/* ==================== MATERIAL DESIGN 3 TYPE SCALE (15 OFFICIAL STYLES) ==================== */
/* Specification: https://m3.material.io/styles/typography/type-scale-tokens */
.md-typescale-display-large {
  font-family: var(--font-family);
  font-size: 57px;
  line-height: 64px;
  letter-spacing: -0.25px;
  font-weight: 400;
}
.md-typescale-display-medium {
  font-family: var(--font-family);
  font-size: 45px;
  line-height: 52px;
  letter-spacing: 0;
  font-weight: 400;
}
.md-typescale-display-small {
  font-family: var(--font-family);
  font-size: 36px;
  line-height: 44px;
  letter-spacing: 0;
  font-weight: 400;
}

.md-typescale-headline-large {
  font-family: var(--font-family);
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 0;
  font-weight: 400;
}
.md-typescale-headline-medium {
  font-family: var(--font-family);
  font-size: 28px;
  line-height: 36px;
  letter-spacing: 0;
  font-weight: 400;
}
.md-typescale-headline-small {
  font-family: var(--font-family);
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0;
  font-weight: 400;
}

.md-typescale-title-large {
  font-family: var(--font-family);
  font-size: 22px;
  line-height: 28px;
  letter-spacing: 0;
  font-weight: 500;
}
.md-typescale-title-medium {
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.15px;
  font-weight: 500;
}
.md-typescale-title-small {
  font-family: var(--font-family);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.1px;
  font-weight: 500;
}

.md-typescale-body-large {
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.5px;
  font-weight: 400;
}
.md-typescale-body-medium {
  font-family: var(--font-family);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.25px;
  font-weight: 400;
}
.md-typescale-body-small {
  font-family: var(--font-family);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.4px;
  font-weight: 400;
}

.md-typescale-label-large {
  font-family: var(--font-family);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.1px;
  font-weight: 500;
}
.md-typescale-label-medium {
  font-family: var(--font-family);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.5px;
  font-weight: 500;
}
.md-typescale-label-small {
  font-family: var(--font-family);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.5px;
  font-weight: 500;
}

/* Material Symbols Outlined Helper (Google M3 Official Iconography) */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined', sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  user-select: none;
}
.material-symbols-outlined.filled {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ==================== M3 TYPOGRAPHY & TITLES ==================== */
.view-title {
  font-size: 1.35rem; /* M3 Headline Small */
  font-weight: 800;
  color: var(--md-sys-color-on-surface);
  letter-spacing: -0.3px;
  line-height: 1.25;
}

.view-subtitle {
  font-size: 0.85rem; /* M3 Body Medium */
  color: var(--md-sys-color-on-surface-variant);
  margin-top: 3px;
  line-height: 1.4;
}

.section-title {
  font-size: 1.05rem; /* M3 Title Medium */
  font-weight: 700;
  margin: 20px 0 12px 0;
  color: var(--md-sys-color-on-surface);
  letter-spacing: 0.1px;
}

.text-accent { color: var(--accent) !important; }
.text-primary { color: var(--primary) !important; }
.text-muted { color: var(--md-sys-color-on-surface-variant) !important; }
.text-danger { color: var(--danger) !important; }
.small { font-size: 0.78rem; }
.d-block { display: block; }
.text-center { text-align: center; }

/* ==================== M3 BUTTONS (Filled, Outlined, Text, Tonal) ==================== */
.btn {
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  border-radius: var(--md-sys-shape-corner-full); /* 9999px M3 Shape Full */
  padding: 10px 22px;
  font-size: 0.88rem; /* M3 Label Large */
  letter-spacing: 0.1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s var(--md-sys-motion-easing-standard);
  position: relative;
  overflow: hidden;
}

/* M3 Filled Button */
.btn-primary {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  font-weight: 800;
  box-shadow: var(--md-sys-elevation-1);
}

.btn-primary:hover {
  filter: brightness(1.06);
  box-shadow: var(--md-sys-elevation-2);
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: var(--md-sys-elevation-1);
}

/* M3 Outlined Button */
.btn-outline {
  background: transparent;
  border: 1px solid var(--md-sys-color-outline);
  color: var(--md-sys-color-primary);
}

.btn-outline:hover {
  background: rgba(143, 232, 37, var(--md-sys-state-hover-opacity));
  border-color: var(--md-sys-color-primary);
}

/* M3 Tonal Button */
.btn-tonal {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

.btn-tonal:hover {
  filter: brightness(1.08);
}

.btn-danger {
  background: var(--md-sys-color-error);
  color: var(--md-sys-color-on-error);
  box-shadow: var(--md-sys-elevation-1);
}

.btn-danger:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.btn-danger:active {
  transform: translateY(0);
}

.btn-outline-warning {
  background: transparent;
  border: 1px solid rgba(245, 158, 11, 0.6);
  color: #fbbf24;
}

.btn-outline-warning:hover {
  background: rgba(245, 158, 11, 0.15);
  color: #fde68a;
  border-color: #f59e0b;
}

.btn-outline-danger {
  background: transparent;
  border: 1px solid rgba(239, 68, 68, 0.6);
  color: #f87171;
}

.btn-outline-danger:hover {
  background: rgba(239, 68, 68, 0.18);
  color: #ffffff;
  border-color: #ef4444;
}

.btn-outline-success {
  background: transparent;
  border: 1px solid rgba(16, 185, 129, 0.6);
  color: #34d399;
}

.btn-outline-success:hover {
  background: rgba(16, 185, 129, 0.18);
  color: #6ee7b7;
  border-color: #10b981;
}

.active-student-filter-chip {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 700;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.active-student-filter-chip:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.active-student-filter-chip.active {
  background: var(--primary);
  color: #000;
  border-color: var(--primary);
  box-shadow: 0 0 10px var(--primary-glow);
}

.active-student-card-inactive {
  opacity: 0.88;
  border-color: rgba(239, 68, 68, 0.35) !important;
  background: rgba(239, 68, 68, 0.04) !important;
}

.active-student-card-inactive:hover {
  opacity: 1;
  border-color: rgba(239, 68, 68, 0.6) !important;
}

.btn-sm {
  padding: 6px 14px;
  font-size: 0.78rem;
  border-radius: var(--md-sys-shape-corner-full);
}

.btn-lg {
  padding: 14px 24px;
  font-size: 1rem;
  border-radius: var(--md-sys-shape-corner-full);
}

.btn-block {
  width: 100%;
}

.btn-text-small {
  background: none;
  border: none;
  color: var(--md-sys-color-primary);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--md-sys-shape-corner-full);
  transition: background-color 0.2s ease;
}

.btn-text-small:hover {
  background: rgba(143, 232, 37, var(--md-sys-state-hover-opacity));
}

/* ==================== M3 STATE LAYERS & INTERACTION SYSTEM ==================== */
/* Specification: https://m3.material.io/foundations/interaction-states */
.m3-state-layer,
.btn,
.nav-item,
.menu-nav-btn,
.card-clickable,
.active-student-filter-chip,
.m3-chip,
.m3-segmented-button {
  position: relative;
}

.m3-state-layer::before,
.btn::before,
.menu-nav-btn::before,
.active-student-filter-chip::before,
.m3-chip::before,
.m3-segmented-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  background-color: currentColor;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s var(--md-sys-motion-easing-standard);
  z-index: 1;
}

.btn:hover::before,
.menu-nav-btn:hover::before,
.active-student-filter-chip:hover::before,
.m3-chip:hover::before,
.m3-segmented-button:hover::before {
  opacity: var(--md-sys-state-hover-opacity);
}

.btn:focus-visible::before,
.menu-nav-btn:focus-visible::before,
.active-student-filter-chip:focus-visible::before,
.m3-chip:focus-visible::before,
.m3-segmented-button:focus-visible::before {
  opacity: var(--md-sys-state-focus-opacity);
}

.btn:active::before,
.menu-nav-btn:active::before,
.active-student-filter-chip:active::before,
.m3-chip:active::before,
.m3-segmented-button:active::before {
  opacity: var(--md-sys-state-pressed-opacity);
}

/* M3 Focus Ring Specification */
:focus-visible {
  outline: 2px solid var(--md-sys-color-primary) !important;
  outline-offset: 2px !important;
}

/* ==================== M3 ELEVATED & TONAL BUTTONS ==================== */
/* Specification: https://m3.material.io/components/buttons/specs */
.btn-elevated,
.btn-m3-elevated {
  background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-primary);
  box-shadow: var(--md-sys-elevation-1);
  border: 1px solid var(--md-sys-color-outline-variant);
}

.btn-elevated:hover,
.btn-m3-elevated:hover {
  box-shadow: var(--md-sys-elevation-2);
  transform: translateY(-1px);
}

/* ==================== M3 FLOATING ACTION BUTTON (FAB) ==================== */
/* Specification: https://m3.material.io/components/floating-action-button/specs */
.m3-fab {
  width: 56px;
  height: 56px;
  border-radius: var(--md-sys-shape-corner-large); /* 16px */
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  box-shadow: var(--md-sys-elevation-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  transition: all 0.2s var(--md-sys-motion-easing-standard);
  position: relative;
  overflow: hidden;
}

.m3-fab:hover {
  box-shadow: var(--md-sys-elevation-4);
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  transform: translateY(-2px);
}

.m3-fab:active {
  box-shadow: var(--md-sys-elevation-2);
  transform: translateY(0);
}

.m3-fab-extended {
  height: 56px;
  padding: 0 20px;
  border-radius: var(--md-sys-shape-corner-large);
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  box-shadow: var(--md-sys-elevation-3);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: none;
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  transition: all 0.2s var(--md-sys-motion-easing-standard);
}

.m3-fab-extended:hover {
  box-shadow: var(--md-sys-elevation-4);
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  transform: translateY(-2px);
}

/* ==================== MATERIAL DESIGN 3 CARDS ==================== */
/* Specification: https://m3.material.io/components/cards/specs */
.m3-card-elevated,
.card-elevated {
  background-color: var(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-corner-large); /* 16px */
  border: 1px solid var(--md-sys-color-outline-variant);
  box-shadow: var(--md-sys-elevation-1);
  padding: 18px;
  transition: all 0.2s var(--md-sys-motion-easing-standard);
}
.m3-card-elevated:hover,
.card-elevated:hover {
  box-shadow: var(--md-sys-elevation-2);
  border-color: rgba(255, 255, 255, 0.16);
}

.m3-card-filled,
.card-filled {
  background-color: var(--md-sys-color-surface-container-highest);
  border-radius: var(--md-sys-shape-corner-large);
  border: none;
  padding: 18px;
}

.m3-card-outlined,
.card-outlined {
  background-color: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-large);
  padding: 18px;
}

/* ==================== MATERIAL DESIGN 3 SEGMENTED BUTTONS ==================== */
/* Specification: https://m3.material.io/components/segmented-buttons/specs */
.m3-segmented-buttons {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-full);
  overflow: hidden;
  background-color: var(--md-sys-color-surface-container-lowest);
  padding: 0;
  width: 100%;
}

.m3-segmented-button {
  flex: 1;
  min-height: 40px;
  padding: 8px 14px;
  border: none;
  border-right: 1px solid var(--md-sys-color-outline);
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.85rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s var(--md-sys-motion-easing-standard);
  font-family: inherit;
  text-align: center;
}

.m3-segmented-button:last-child {
  border-right: none;
}

.m3-segmented-button:hover {
  background-color: rgba(255, 255, 255, var(--md-sys-state-hover-opacity));
  color: var(--md-sys-color-on-surface);
}

.m3-segmented-button.active,
.m3-segmented-button.selected {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  font-weight: 700;
}

/* ==================== MATERIAL DESIGN 3 CHIPS ==================== */
/* Specification: https://m3.material.io/components/chips/specs */
.m3-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 16px;
  border-radius: var(--md-sys-shape-corner-small); /* 8px in M3 */
  border: 1px solid var(--md-sys-color-outline);
  background-color: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s var(--md-sys-motion-easing-standard);
  user-select: none;
}

.m3-chip:hover {
  background-color: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
  border-color: var(--md-sys-color-outline);
}

.m3-chip.active,
.m3-chip.selected {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border-color: transparent;
  font-weight: 700;
}

/* ==================== MATERIAL DESIGN 3 BOTTOM SHEET DRAG HANDLE ==================== */
/* Specification: https://m3.material.io/components/bottom-sheets/specs */
.m3-drag-handle {
  width: 32px;
  height: 4px;
  border-radius: 2px;
  background-color: var(--md-sys-color-outline);
  margin: 12px auto 14px auto;
  opacity: 0.6;
}

/* ==================== MATERIAL DESIGN 3 SWITCH ==================== */
/* Specification: https://m3.material.io/components/switch/specs */
.m3-switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 32px;
  cursor: pointer;
}

.m3-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.m3-switch-slider {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: var(--md-sys-color-surface-container-highest);
  border: 2px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-full);
  transition: all 0.2s var(--md-sys-motion-easing-standard);
}

.m3-switch-slider::before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 6px;
  bottom: 6px;
  background-color: var(--md-sys-color-outline);
  border-radius: 50%;
  transition: all 0.2s var(--md-sys-motion-easing-emphasized);
}

.m3-switch input:checked + .m3-switch-slider {
  background-color: var(--md-sys-color-primary);
  border-color: var(--md-sys-color-primary);
}

.m3-switch input:checked + .m3-switch-slider::before {
  transform: translateX(20px);
  width: 24px;
  height: 24px;
  bottom: 2px;
  left: 4px;
  background-color: var(--md-sys-color-on-primary);
}

/* ==================== M3 FORM CONTROLS ==================== */
.form-group {
  margin-bottom: 14px;
}

.form-group label {
  display: block;
  font-size: 0.82rem; /* M3 Label Medium */
  font-weight: 600;
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: 6px;
  letter-spacing: 0.2px;
}

.form-row {
  display: flex;
  gap: 12px;
}

.col-6 {
  flex: 1;
}

.form-control {
  width: 100%;
  background-color: var(--md-sys-color-surface-container-highest);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-small); /* 8-10px */
  color: var(--md-sys-color-on-surface);
  padding: 11px 15px;
  font-size: 0.92rem;
  font-family: inherit;
  transition: border-color 0.2s var(--md-sys-motion-easing-standard), background-color 0.2s ease;
}

.form-control:focus {
  outline: none;
  border: 2px solid var(--md-sys-color-primary);
  box-shadow: none; /* M3 clean crisp focus indicator */
}

.form-hint {
  font-size: 0.78rem;
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: 10px;
}

.form-section-heading {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--md-sys-color-on-surface);
  margin: 18px 0 10px 0;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  padding-bottom: 6px;
}

/* Workout Header & Stats */
.workout-header-card {
  background: linear-gradient(145deg, #162038 0%, #101626 100%);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 18px;
}

.workout-badge-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.workout-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
}

.workout-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 6px 0 16px 0;
  line-height: 1.4;
}

.workout-stats-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: var(--radius-md);
  padding: 12px;
  margin-bottom: 16px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-label {
  font-size: 0.72rem;
  color: var(--text-dim);
  text-transform: uppercase;
  font-weight: 700;
}

.stat-value {
  font-size: 1.2rem;
  font-weight: 800;
  color: #fff;
  margin-top: 2px;
}

.routine-selector-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%;
}

.routine-selector-row > span {
  font-size: 0.72rem;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.routine-pills {
  display: flex;
  width: 100%;
  gap: 4px;
  align-items: stretch;
  background: var(--md-sys-color-surface-container-low);
  padding: 3px;
  border-radius: var(--md-sys-shape-corner-medium);
  border: 1px solid var(--md-sys-color-outline-variant);
}

.pill-btn {
  flex: 1 1 0;
  min-width: 0;
  background: transparent;
  border: 1px solid transparent;
  color: var(--md-sys-color-on-surface-variant);
  border-radius: var(--md-sys-shape-corner-small);
  padding: 7px 2px;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s var(--md-sys-motion-easing-standard);
  text-align: center;
  white-space: nowrap;
  box-sizing: border-box;
}

.pill-btn:hover {
  background: var(--md-sys-color-surface-container-highest);
  color: var(--md-sys-color-on-surface);
}

.pill-btn.active {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  font-weight: 800;
  border-color: transparent;
  box-shadow: var(--md-sys-elevation-1);
}

/* Exercise Cards with Weight & Rep Inputs */
.exercise-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 16px;
}

.exercise-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}

.exercise-info {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.exercise-number {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 800;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.exercise-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
}

.exercise-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  display: block;
  margin-top: 2px;
}

.btn-video-watch {
  background: rgba(6, 182, 212, 0.12);
  border: 1px solid rgba(6, 182, 212, 0.3);
  color: var(--accent);
  border-radius: var(--radius-full);
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-video-watch:hover {
  background: var(--accent);
  color: #000;
}

/* Sets Table Styling (Cargas e Repetições) */
.sets-table-wrapper {
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: var(--radius-sm);
  padding: 10px;
  margin-bottom: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sets-table-header {
  display: grid;
  grid-template-columns: 26px minmax(62px, 1.15fr) minmax(56px, 1fr) minmax(52px, 0.95fr) minmax(64px, 1.2fr) minmax(54px, 0.95fr) 56px;
  gap: 5px;
  min-width: 390px;
  font-size: 0.62rem;
  color: var(--text-dim);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 8px;
  text-align: center;
  align-items: end;
}

.col-hdr {
  line-height: 1.15;
  word-break: break-word;
  padding: 0 1px;
}

.set-row {
  display: grid;
  grid-template-columns: 26px minmax(62px, 1.15fr) minmax(56px, 1fr) minmax(52px, 0.95fr) minmax(64px, 1.2fr) minmax(54px, 0.95fr) 56px;
  gap: 5px;
  min-width: 390px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: all 0.2s ease;
}

.set-row:last-child {
  border-bottom: none;
}

.set-row.set-completed {
  opacity: 0.85;
  background-color: rgba(118, 186, 27, 0.06);
  border-radius: var(--radius-sm);
}

.set-num-badge {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-weight: 700;
  font-size: 0.74rem;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.col-set {
  display: flex;
  justify-content: center;
  align-items: center;
}

.col-prev {
  font-size: 0.74rem;
  color: var(--text-dim);
  text-align: center;
}

.input-set-weight, .input-set-reps {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  color: #fff;
  border-radius: 6px;
  padding: 6px 3px;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
  font-family: inherit;
}

.input-set-weight:focus, .input-set-reps:focus {
  border-color: var(--primary);
  outline: none;
}

.badge-target-reps {
  display: inline-block;
  background: rgba(6, 182, 212, 0.12);
  border: 1px solid rgba(6, 182, 212, 0.35);
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 6px 2px;
  border-radius: 6px;
  text-align: center;
  width: 100%;
  white-space: nowrap;
}

.input-set-target {
  width: 100%;
  background: rgba(6, 182, 212, 0.12);
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 6px;
  padding: 6px 2px;
  text-align: center;
  font-size: 0.76rem;
  font-weight: 700;
  font-family: inherit;
}

.input-set-target:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.4);
}

.badge-set-intensity {
  display: inline-block;
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 6px 2px;
  border-radius: 6px;
  text-align: center;
  width: 100%;
  white-space: nowrap;
}

.input-set-intensity {
  width: 100%;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.45);
  color: #fbbf24;
  border-radius: 6px;
  padding: 6px 2px;
  text-align: center;
  font-size: 0.74rem;
  font-weight: 700;
  font-family: inherit;
}

.input-set-intensity:focus {
  outline: none;
  border-color: #fbbf24;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.35);
}

.btn-set-rest {
  width: 100%;
  background: rgba(6, 182, 212, 0.1);
  border: 1px solid rgba(6, 182, 212, 0.3);
  color: var(--accent);
  border-radius: 6px;
  padding: 6px 2px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-set-rest:hover {
  background: rgba(6, 182, 212, 0.22);
  border-color: var(--accent);
}

.btn-complete-set {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  border-radius: 6px;
  padding: 6px 4px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-complete-set.completed {
  background: var(--primary);
  color: #000;
  border-color: var(--primary);
  box-shadow: 0 0 10px var(--primary-glow);
}

.exercise-actions-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 4px;
}

/* Proportional Weight Calculation Badge & Highlights */
.proportional-calc-badge {
  background: rgba(118, 186, 27, 0.08);
  border: 1px solid rgba(118, 186, 27, 0.28);
  color: #a3e635;
  font-size: 0.72rem;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  animation: fadeIn 0.3s ease;
}

.btn-calc-action {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-calc-action:hover {
  background: var(--primary);
  color: #000;
  border-color: var(--primary);
  box-shadow: 0 0 8px var(--primary-glow);
}

.input-set-weight.weight-auto-calculated {
  border-color: #76ba1b !important;
  background-color: rgba(118, 186, 27, 0.22) !important;
  box-shadow: 0 0 10px rgba(118, 186, 27, 0.45) !important;
  transition: all 0.3s ease;
}

.workout-finish-bar {
  margin-top: 24px;
  padding-bottom: 20px;
}

/* ==================== M3 DIALOGS / MODALS ==================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--md-sys-motion-easing-standard);
  padding: 16px;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-box {
  background-color: var(--md-sys-color-surface-container-high);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-extra-large); /* 28px Official M3 Shape Extra Large! */
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px;
  box-shadow: var(--md-sys-elevation-3);
  animation: modalScale 0.25s var(--md-sys-motion-easing-emphasized) forwards;
}

@keyframes modalScale {
  from { transform: scale(0.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.modal-header, .video-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.modal-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
}

.modal-subtitle {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.modal-close-btn {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-player-frame {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: #000;
  margin-bottom: 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.video-player-frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.instructions-heading {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 14px 0 8px 0;
  color: #fff;
}

.tips-list, .mistakes-list {
  list-style: none;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.tips-list li, .mistakes-list li {
  margin-bottom: 6px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.check-icon { color: var(--primary); font-weight: bold; }
.cross-icon { color: var(--danger); font-weight: bold; }

/* Rest Timer Component */
.timer-modal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;
}

.timer-circle-wrapper {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 15px 0;
}

.timer-svg {
  transform: rotate(-90deg);
  width: 220px;
  height: 220px;
}

.timer-circle-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 10;
}

.timer-circle-progress {
  fill: none;
  stroke: var(--primary);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 565.48; /* 2 * PI * 90 */
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear;
}

.timer-center-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.timer-digits {
  font-size: 2.8rem;
  font-weight: 900;
  letter-spacing: -1px;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.timer-label {
  font-size: 0.75rem;
  color: var(--text-dim);
  text-transform: uppercase;
  font-weight: 700;
}

.timer-quick-adjust {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.btn-time-adjust {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.timer-controls-row {
  display: flex;
  gap: 12px;
  width: 100%;
}

/* Floating Docked Timer Badge */
/* ==================== M3 EXTENDED FAB (FLOATING REST TIMER) ==================== */
.floating-timer-badge {
  position: fixed;
  bottom: 92px;
  right: 20px;
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  border: 1px solid rgba(143, 232, 37, 0.4);
  padding: 10px 18px;
  border-radius: var(--md-sys-shape-corner-large); /* 16px M3 Extended FAB shape */
  display: none;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: var(--md-sys-elevation-3);
  z-index: 80;
  transition: all 0.2s var(--md-sys-motion-easing-standard);
  animation: bounceMini 2.5s infinite;
}

.floating-timer-badge:hover {
  box-shadow: var(--md-sys-elevation-4);
  filter: brightness(1.08);
}

.floating-timer-badge.active {
  display: flex;
}

@keyframes bounceMini {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.timer-badge-pulse {
  width: 8px;
  height: 8px;
  background-color: #000;
  border-radius: 50%;
  animation: pulseDot 1s infinite alternate;
}

@keyframes pulseDot {
  from { opacity: 0.3; }
  to { opacity: 1; }
}

/* Interactive Before & After Slider */
.before-after-container {
  position: relative;
  width: 100%;
  height: 380px;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: 14px 0;
  background-color: #000;
}

.img-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.after-img {
  width: 50%;
  z-index: 2;
  border-right: 2px solid #fff;
}

.img-tag {
  position: absolute;
  bottom: 12px;
  background: rgba(0, 0, 0, 0.7);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
}

.tag-before { right: 12px; }
.tag-after { left: 12px; z-index: 3; }

.slider-handle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
  z-index: 10;
}

.slider-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #fff;
  z-index: 5;
  pointer-events: none;
  transform: translateX(-50%);
}

.slider-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.angle-selector-pill {
  display: flex;
  gap: 6px;
}

.pill-mini {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  border-radius: var(--radius-full);
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}

.pill-mini.active {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
}

.quick-evolution-chips {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.chip-item {
  background: rgba(0, 0, 0, 0.25);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 14px 0;
}

@media (min-width: 440px) {
  .metrics-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.metric-box {
  background: rgba(0, 0, 0, 0.25);
  border-radius: var(--radius-sm);
  padding: 12px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.m-val {
  font-size: 1.2rem;
  font-weight: 800;
  color: #fff;
  display: block;
}

.m-lbl {
  font-size: 0.72rem;
  color: var(--text-dim);
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 2px;
  display: block;
}

.coach-notes-box {
  background: rgba(118, 186, 27, 0.06);
  border: 1px dashed rgba(118, 186, 27, 0.3);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-top: 14px;
}

.coach-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 0.85rem;
  color: var(--primary);
}

.coach-text {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.4;
}

.photo-thumbnail-row {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.thumb-img {
  width: 70px;
  height: 90px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: transform 0.2s ease;
}

.thumb-img:hover {
  transform: scale(1.05);
}

/* Photo Upload Grid */
.photo-upload-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.photo-dropzone {
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-sm);
  height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: var(--bg-input);
  transition: all 0.2s ease;
}

.photo-dropzone:hover {
  border-color: var(--primary);
}

.dropzone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.upload-icon { font-size: 1.5rem; }
.upload-lbl { font-size: 0.72rem; color: var(--text-muted); text-align: center; }

/* Payment & Pix Components */
.plan-price {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--accent);
}

.plan-badge-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.plan-name {
  font-size: 1.3rem;
  font-weight: 800;
  color: #fff;
}

.plan-renew {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 4px 0 16px 0;
}

.plan-perks-list {
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-bottom: 18px;
}

.perk-item {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.perk-item:last-child {
  margin-bottom: 0;
}

.plan-action-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.checkout-method-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}

.checkout-tab {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  padding: 10px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.checkout-tab.active {
  background: rgba(118, 186, 27, 0.15);
  border-color: var(--primary);
  color: var(--primary);
}

.checkout-body {
  display: none;
}

.checkout-body.active {
  display: block;
}

.pix-qr-container {
  display: flex;
  justify-content: center;
  margin: 12px 0;
}

.pix-badge {
  display: inline-block;
  background: rgba(118, 186, 27, 0.1);
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: var(--radius-full);
}

.pix-timer {
  font-size: 0.85rem;
  color: var(--warning);
  font-weight: 700;
  margin-bottom: 8px;
}

.pix-instruction {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.copy-paste-group {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.copy-input {
  font-size: 0.75rem;
  font-family: monospace;
}

.invoice-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
}

.inv-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.inv-amount {
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  display: block;
  text-align: right;
  margin-bottom: 4px;
}

/* Charts & Progress */
.canvas-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.streak-card {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, var(--bg-card) 80%);
  border-color: rgba(245, 158, 11, 0.3);
}

.streak-flex {
  display: flex;
  align-items: center;
  gap: 14px;
}

.streak-emoji {
  font-size: 2.2rem;
}

.streak-title {
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
}

.streak-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.pr-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.pr-card {
  padding: 12px;
  text-align: center;
}

.pr-name {
  font-size: 0.8rem;
  color: var(--text-muted);
  display: block;
}

.pr-val {
  font-size: 1.35rem;
  font-weight: 900;
  display: block;
  margin: 2px 0;
}

.pr-meta {
  font-size: 0.7rem;
  color: var(--primary);
  font-weight: 700;
}

/* ==================== MATERIAL DESIGN 3 NAVIGATION BAR ==================== */
/* Specification: https://m3.material.io/components/navigation-bar/specs */
.bottom-nav {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px; /* Official M3 Navigation Bar Height */
  background-color: var(--md-sys-color-surface-container);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--md-sys-color-outline-variant);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 8px 4px calc(env(safe-area-inset-bottom, 0px) + 8px) 4px;
  z-index: 50;
  box-shadow: var(--md-sys-elevation-2);
}

.nav-item {
  background: none;
  border: none;
  color: var(--md-sys-color-on-surface-variant);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  padding: 4px 0;
  min-width: 0;
  flex: 1;
  transition: all 0.2s var(--md-sys-motion-easing-standard);
  font-family: inherit;
  position: relative;
  border-radius: var(--md-sys-shape-corner-full);
}

/* M3 Navigation Bar Active Indicator Pill (Official Spec: 64px width, 32px height, 16px radius) */
.nav-item .nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 32px;
  border-radius: 16px;
  font-size: 1.3rem;
  background: transparent;
  transition: all 0.25s var(--md-sys-motion-easing-emphasized);
}

.nav-item.active .nav-icon {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  transform: none; /* M3 relies on clean indicator pill */
}

.nav-item span:not(.nav-icon) {
  font-size: 0.75rem; /* 12px M3 Label Medium */
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--md-sys-color-on-surface-variant);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 100%;
  transition: color 0.2s ease, font-weight 0.2s ease;
}

.nav-item.active span:not(.nav-icon) {
  color: var(--md-sys-color-on-surface);
  font-weight: 700;
}

/* ==================== M3 SNACKBAR / TOAST NOTIFICATION ==================== */
.app-toast {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(-30px);
  background-color: var(--md-sys-color-surface-container-highest);
  color: var(--md-sys-color-on-surface);
  padding: 12px 20px;
  border-radius: var(--md-sys-shape-corner-small); /* 8px M3 Snackbar Shape */
  border: 1px solid var(--md-sys-color-outline-variant);
  font-size: 0.88rem;
  font-weight: 600;
  z-index: 200;
  box-shadow: var(--md-sys-elevation-3);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s var(--md-sys-motion-easing-emphasized);
  white-space: nowrap;
}

.app-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.toast-success { border-left: 4px solid var(--md-sys-color-primary); }
.toast-info { border-left: 4px solid var(--md-sys-color-tertiary); }
.toast-warning { border-left: 4px solid var(--warning); }

/* Celebration Modal */
.trophy-emoji {
  font-size: 4rem;
  margin-bottom: 10px;
  animation: bounceMini 1s infinite alternate;
}

.celebration-title {
  font-size: 1.4rem;
  font-weight: 900;
  color: #fff;
}

.celebration-subtitle {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 6px 0 20px 0;
}

.celebration-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}

.celeb-card {
  background: rgba(0, 0, 0, 0.3);
  padding: 14px;
  border-radius: var(--radius-sm);
}

.celeb-val {
  font-size: 1.3rem;
  font-weight: 900;
  display: block;
}

.celeb-label {
  font-size: 0.72rem;
  color: var(--text-dim);
  text-transform: uppercase;
}

/* Consultant Specific Styles */
.consultant-quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.action-card-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  cursor: pointer;
  color: #fff;
  transition: all 0.2s ease;
}

.action-card-btn:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
}

.act-icon { font-size: 1.8rem; }
.act-sub { font-size: 0.72rem; color: var(--text-muted); }

.student-mini-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.student-mini-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.s-avatar {
  background: var(--bg-input);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.s-info { flex: 1; }

.exercises-grid-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.exercise-admin-card {
  padding: 16px;
}

.admin-ex-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.admin-ex-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
}

.admin-ex-equip {
  font-size: 0.78rem;
  color: var(--accent);
  margin: 3px 0 6px 0;
}

.admin-ex-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin-bottom: 10px;
}

.admin-ex-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 8px;
}

.student-card-detailed {
  padding: 18px;
}

.student-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.student-name {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
}

.student-card-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  background: rgba(0, 0, 0, 0.25);
  padding: 10px;
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
}

.s-stat-box {
  display: flex;
  flex-direction: column;
}

.s-stat-lbl {
  font-size: 0.68rem;
  color: var(--text-dim);
  text-transform: uppercase;
  font-weight: 700;
}

.s-stat-v {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  margin-top: 2px;
}

.student-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Invitation & Share Modal Styles */
.btn-whatsapp {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35) !important;
}

.btn-whatsapp:hover {
  filter: brightness(1.1);
}

.btn-email {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35) !important;
}

.btn-email:hover {
  filter: brightness(1.1);
}

.invite-success-header {
  text-align: center;
  margin-bottom: 20px;
}

.invite-success-icon {
  font-size: 3.5rem;
  margin-bottom: 8px;
  animation: bounceMini 1s infinite alternate;
}

.invite-channel-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 18px 0;
}

.invite-link-box {
  background: rgba(0, 0, 0, 0.3);
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin: 16px 0;
}

.invite-link-label {
  font-size: 0.75rem;
  color: var(--text-dim);
  text-transform: uppercase;
  font-weight: 700;
  display: block;
  margin-bottom: 6px;
}

.invite-link-input-row {
  display: flex;
  gap: 8px;
}

.invite-message-preview {
  background: #0d1424;
  border-left: 3px solid #25D366;
  border-radius: var(--radius-sm);
  padding: 14px;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
  white-space: pre-line;
  max-height: 160px;
  overflow-y: auto;
  margin-bottom: 16px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--text-muted);
  cursor: pointer;
  margin-top: 6px;
}

.checkbox-label input[type="checkbox"] {
  accent-color: var(--primary);
  width: 16px;
  height: 16px;
}

/* Onboarding Screen for Student */
.onboarding-card {
  text-align: center;
  padding: 24px 16px;
}

.onboarding-badge {
  display: inline-block;
  background: rgba(118, 186, 27, 0.15);
  color: var(--primary);
  border: 1px solid rgba(118, 186, 27, 0.3);
  font-size: 0.75rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  margin-bottom: 12px;
}

.onboarding-title {
  font-size: 1.45rem;
  font-weight: 900;
  color: #fff;
  margin-bottom: 8px;
}

.onboarding-subtitle {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 20px;
  line-height: 1.4;
}

.install-guide-box {
  background: rgba(0, 0, 0, 0.25);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: left;
  margin-bottom: 20px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.install-guide-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.install-steps-list {
  list-style: none;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.install-steps-list li {
  margin-bottom: 8px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.step-num-circle {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Pre-existing Reports & Medical Anamnesis Styles */
.report-student-selector-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 16px;
}

.report-header-card {
  background: linear-gradient(145deg, #182239 0%, #121828 100%);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 18px;
  margin-bottom: 18px;
}

.report-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.report-student-title {
  font-size: 1.3rem;
  font-weight: 900;
  color: #fff;
}

.report-doctor-info {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.medical-alert-box {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 16px;
}

.medical-alert-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--danger);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.medical-contra-box {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 16px;
}

.medical-contra-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--warning);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.report-list-items {
  list-style: none;
  font-size: 0.82rem;
  color: var(--text-main);
}

.report-list-items li {
  margin-bottom: 6px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.4;
}

.report-section-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 16px;
}

@media (min-width: 500px) {
  .report-section-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.report-info-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px;
}

.report-info-heading {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.report-info-text {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.lifestyle-chips-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

.lifestyle-chip {
  background: rgba(0, 0, 0, 0.25);
  padding: 8px;
  border-radius: var(--radius-sm);
  font-size: 0.76rem;
}

.lifestyle-chip-lbl {
  color: var(--text-dim);
  display: block;
  font-size: 0.68rem;
  text-transform: uppercase;
  font-weight: 700;
}

.lifestyle-chip-val {
  color: #fff;
  font-weight: 600;
  margin-top: 2px;
  display: block;
}

.attached-exams-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.exam-item-chip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
}

.exam-name {
  color: #fff;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.exam-meta {
  font-size: 0.72rem;
  color: var(--primary);
}

.coach-conduct-card {
  background: rgba(118, 186, 27, 0.06);
  border: 1px solid rgba(118, 186, 27, 0.25);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 20px;
}

.coach-conduct-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.coach-conduct-body {
  font-size: 0.85rem;
  color: var(--text-main);
  line-height: 1.5;
}

@media print {
  body {
    background: #fff !important;
    color: #000 !important;
  }
  .app-top-nav, .bottom-nav, .assessment-subnav-bar, .anamnese-actions-bar, .btn-icon-device, .floating-timer-badge, .report-controls-card, .report-actions-card, .trainer-edit-actions {
    display: none !important;
  }
  .device-wrapper {
    max-width: 100% !important;
    height: auto !important;
    box-shadow: none !important;
    border: none !important;
  }
  .card, .anamnese-section, .podium-card, .freq-stat-box, .load-item-row {
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
  }
  .anamnese-sec-title, .card-title, .podium-ex-name, .highlight-headline {
    color: #000 !important;
  }
  .freq-val, .gain-kg, .text-primary {
    color: #558b16 !important;
  }
  .report-highlight-banner {
    background: #e6fdf6 !important;
    color: #064e3b !important;
    border: 1px solid var(--primary) !important;
  }
  .anamnese-sec-title {
    border-bottom: 2px solid #000 !important;
  }
  .anamnese-q-label {
    color: #222 !important;
  }
  .form-control, .anamnese-radio-card, .trainer-textarea {
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #ccc !important;
  }
}

/* ==================== AI VOICE COMMAND ASSISTANT (PROFESSOR) ==================== */
.voice-assistant-card {
  text-align: center;
  padding: 10px 0;
}

.voice-mic-circle {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7ec32a 0%, #2e7d32 100%);
  border: 4px solid rgba(118, 186, 27, 0.3);
  box-shadow: 0 0 25px rgba(118, 186, 27, 0.4);
  color: #fff;
  font-size: 2.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 14px auto;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.voice-mic-circle.recording {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  border-color: rgba(239, 68, 68, 0.4);
  box-shadow: 0 0 35px rgba(239, 68, 68, 0.6);
  animation: micPulse 1.4s infinite;
}

@keyframes micPulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
  70% { transform: scale(1.08); box-shadow: 0 0 0 18px rgba(239, 68, 68, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.voice-waves-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 38px;
  margin: 12px 0 16px 0;
}

.v-wave-bar {
  width: 4px;
  height: 8px;
  background: var(--text-dim);
  border-radius: 3px;
  transition: height 0.2s ease, background-color 0.2s ease;
}

.voice-waves-wrapper.animating .v-wave-bar {
  background: var(--primary);
  animation: waveBounce 0.8s ease-in-out infinite alternate;
}

.voice-waves-wrapper.animating .v-wave-bar:nth-child(1) { animation-delay: 0.0s; height: 18px; }
.voice-waves-wrapper.animating .v-wave-bar:nth-child(2) { animation-delay: 0.15s; height: 28px; }
.voice-waves-wrapper.animating .v-wave-bar:nth-child(3) { animation-delay: 0.3s; height: 36px; }
.voice-waves-wrapper.animating .v-wave-bar:nth-child(4) { animation-delay: 0.45s; height: 24px; }
.voice-waves-wrapper.animating .v-wave-bar:nth-child(5) { animation-delay: 0.2s; height: 32px; }
.voice-waves-wrapper.animating .v-wave-bar:nth-child(6) { animation-delay: 0.35s; height: 20px; }
.voice-waves-wrapper.animating .v-wave-bar:nth-child(7) { animation-delay: 0.1s; height: 12px; }

@keyframes waveBounce {
  0% { height: 6px; }
  100% { height: 34px; }
}

.voice-transcript-card {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 12px;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.voice-transcript-text {
  font-size: 0.95rem;
  color: #fff;
  font-style: italic;
  line-height: 1.4;
}

.voice-resp {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 14px;
  text-align: center;
  line-height: 1.4;
}

.voice-resp.success {
  background: rgba(118, 186, 27, 0.15);
  border: 1px solid rgba(118, 186, 27, 0.35);
  color: var(--primary);
}

.voice-resp.warning {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: var(--warning);
}

.voice-presets-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 700;
  margin-bottom: 8px;
  text-align: left;
}

.voice-presets-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.preset-pill {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 6px 11px;
  border-radius: var(--radius-full);
  font-size: 0.74rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.preset-pill:hover {
  background: var(--primary);
  color: #000;
  border-color: var(--primary);
}

.voice-manual-input-row {
  display: flex;
  gap: 8px;
}

/* ==================== M3 SEGMENTED BUTTONS / ASSESSMENT TABS ==================== */
.assessment-subnav-bar {
  display: flex;
  background: var(--md-sys-color-surface-container);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-full);
  padding: 4px;
  gap: 4px;
  margin-bottom: 18px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.assessment-subnav-bar::-webkit-scrollbar {
  display: none;
}

.assessment-subtab-btn {
  flex: 1 0 auto;
  min-width: fit-content;
  white-space: nowrap;
  background: transparent;
  border: none;
  color: var(--md-sys-color-on-surface-variant);
  padding: 8px 12px;
  border-radius: var(--md-sys-shape-corner-full);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s var(--md-sys-motion-easing-standard);
  text-align: center;
}

.assessment-subtab-btn:hover {
  background: var(--md-sys-color-surface-container-highest);
  color: var(--md-sys-color-on-surface);
}

.assessment-subtab-btn.active {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  font-weight: 700;
  box-shadow: var(--md-sys-elevation-1);
}

.anamnese-form-container {
  display: flex;
  flex-direction: column;
}

.anamnese-section {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 18px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}

.anamnese-sec-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 8px;
}

.anamnese-q-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 6px;
  display: block;
  line-height: 1.35;
}

.anamnese-options-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.anamnese-radio-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.84rem;
  color: var(--text-main);
  transition: all 0.2s ease;
}

.anamnese-radio-card:hover {
  border-color: var(--primary);
}

.anamnese-radio-card input[type="radio"] {
  accent-color: var(--primary);
  width: 16px;
  height: 16px;
}

.anamnese-radio-card input[type="radio"]:checked + span {
  color: var(--primary);
  font-weight: 700;
}

/* Anamnese Mode Switcher (Questions / Answers / Send) - M3 Segmented Button */
.anamnese-mode-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--md-sys-color-surface-container);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-full);
  padding: 4px;
  gap: 4px;
  width: 100%;
  box-sizing: border-box;
}

.anamnese-mode-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: none;
  color: var(--md-sys-color-on-surface-variant);
  padding: 8px 4px;
  border-radius: var(--md-sys-shape-corner-full);
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s var(--md-sys-motion-easing-standard);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  box-sizing: border-box;
  user-select: none;
}

.anamnese-mode-btn .anamnese-mode-icon {
  font-size: 0.92rem;
  line-height: 1;
  flex-shrink: 0;
}

.anamnese-mode-btn .anamnese-mode-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.anamnese-mode-btn.active {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  font-weight: 700;
  box-shadow: var(--md-sys-elevation-1);
}

.anamnese-mode-btn:hover:not(.active) {
  background: var(--md-sys-color-surface-container-highest);
  color: var(--md-sys-color-on-surface);
}

@media (max-width: 380px) {
  .anamnese-mode-btn {
    font-size: 0.69rem;
    padding: 7px 2px;
    gap: 3px;
  }
  .anamnese-mode-btn .anamnese-mode-icon {
    font-size: 0.82rem;
  }
}

.anamnese-topic-card {
  transition: border-color 0.2s ease;
}

.anamnese-topic-card:hover {
  border-color: rgba(118, 186, 27, 0.4);
}

.anamnese-question-item {
  transition: all 0.2s ease;
}

.anamnese-question-item:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* ==================== RELATÓRIO MENSAL DE EVOLUÇÃO ==================== */
.monthly-report-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 40px;
}

.report-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 4px;
}

.report-brand-tag {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--primary);
  text-transform: uppercase;
  margin-bottom: 4px;
  display: inline-block;
}

.report-controls-card {
  background: rgba(19, 27, 46, 0.7);
  border-color: var(--border-color);
  padding: 14px 16px;
}

.report-controls-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 480px) {
  .report-controls-grid {
    grid-template-columns: 1fr;
  }
}

.control-label-mini {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 5px;
  display: block;
}

.report-student-banner {
  background: linear-gradient(135deg, rgba(19, 27, 46, 0.9) 0%, rgba(118, 186, 27, 0.12) 100%);
  border: 1px solid rgba(118, 186, 27, 0.3);
  padding: 16px;
}

.student-banner-flex {
  display: flex;
  align-items: center;
  gap: 14px;
}

.student-banner-avatar {
  font-size: 2rem;
  width: 50px;
  height: 50px;
  background: rgba(118, 186, 27, 0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.student-banner-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
}

.student-banner-meta {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.report-highlight-banner {
  background: linear-gradient(135deg, #7ec32a 0%, #2e7d32 100%);
  color: #ffffff;
  border: none;
  box-shadow: 0 4px 20px rgba(118, 186, 27, 0.35);
  padding: 16px 18px;
  border-radius: var(--radius-md);
}

.highlight-banner-inner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.highlight-banner-icon {
  font-size: 2.2rem;
  line-height: 1;
}

.highlight-headline {
  font-size: 1.05rem;
  font-weight: 900;
  color: #022c22;
  line-height: 1.3;
}

.highlight-sub {
  font-size: 0.84rem;
  color: #064e3b;
  margin-top: 4px;
  line-height: 1.4;
}

.report-section-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 18px;
  border-radius: var(--radius-md);
}

.report-sec-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sec-title-flex {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.sec-icon {
  font-size: 1.5rem;
  line-height: 1.2;
}

/* Frequency Comparison Layout */
.freq-comparison-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.freq-stat-box {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 14px 10px;
  text-align: center;
}

.freq-stat-box.curr-month {
  border-color: rgba(118, 186, 27, 0.4);
  background: rgba(118, 186, 27, 0.08);
}

.freq-stat-period {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
}

.freq-stat-main {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin: 6px 0;
}

.freq-val {
  font-size: 1.85rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}

.freq-unit {
  font-size: 0.78rem;
  color: var(--text-dim);
  font-weight: 600;
}

.freq-stat-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.freq-stat-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 40px;
}

.divider-arrow {
  font-size: 1.3rem;
  color: var(--accent);
}

.divider-delta {
  font-size: 0.85rem;
  font-weight: 800;
}

.freq-visual-bars-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
  background: rgba(0, 0, 0, 0.2);
  padding: 12px;
  border-radius: var(--radius-sm);
}

.freq-bar-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.freq-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.freq-bar-track {
  width: 100%;
  height: 10px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}

.freq-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.6s ease;
}

.prev-fill {
  background: #64748b;
}

.curr-fill {
  background: linear-gradient(90deg, #7ec32a, #2e7d32);
  box-shadow: 0 0 10px rgba(118, 186, 27, 0.5);
}

.freq-insight-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(6, 182, 212, 0.08);
  border: 1px solid rgba(6, 182, 212, 0.25);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.insight-icon {
  font-size: 1.1rem;
}

/* Podium Best Evolutions */
.best-evolution-podium {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}

@media (max-width: 480px) {
  .best-evolution-podium {
    grid-template-columns: 1fr;
  }
}

.podium-card {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.podium-card.gold-podium {
  border-color: rgba(245, 158, 11, 0.5);
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.12) 0%, rgba(26, 34, 56, 0.9) 100%);
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.15);
}

.podium-card.silver-podium {
  border-color: rgba(148, 163, 184, 0.5);
  background: linear-gradient(180deg, rgba(148, 163, 184, 0.12) 0%, rgba(26, 34, 56, 0.9) 100%);
}

.podium-card.bronze-podium {
  border-color: rgba(217, 119, 6, 0.4);
  background: linear-gradient(180deg, rgba(217, 119, 6, 0.1) 0%, rgba(26, 34, 56, 0.9) 100%);
}

.podium-rank-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.podium-medal {
  font-size: 1.4rem;
}

.podium-rank-title {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.podium-ex-name {
  font-size: 0.92rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 2px;
}

.podium-muscle-group {
  font-size: 0.72rem;
  color: var(--text-dim);
  margin-bottom: 10px;
}

.podium-weight-diff {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.25);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  margin-bottom: 10px;
}

.p-weight-col {
  display: flex;
  flex-direction: column;
}

.p-lbl {
  font-size: 0.64rem;
  color: var(--text-dim);
  text-transform: uppercase;
}

.p-val {
  font-size: 0.88rem;
  font-weight: 800;
  color: #fff;
}

.p-arrow {
  color: var(--accent);
  font-weight: bold;
}

.podium-badge-gain {
  background: rgba(118, 186, 27, 0.15);
  border: 1px solid rgba(118, 186, 27, 0.35);
  border-radius: var(--radius-sm);
  padding: 6px;
  text-align: center;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}

.gain-kg {
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--primary);
}

.gain-pct {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent);
}

/* Load Evolution List */
.load-table-wrapper {
  margin-top: 14px;
}

.sub-section-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.load-evolution-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.load-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  transition: all 0.2s ease;
}

.load-item-row:hover {
  border-color: rgba(118, 186, 27, 0.3);
}

.load-item-info {
  display: flex;
  flex-direction: column;
  min-width: 130px;
}

.load-item-name {
  font-size: 0.84rem;
  color: #fff;
}

.load-item-group {
  font-size: 0.7rem;
  color: var(--text-dim);
}

.load-item-compare {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
}

.load-prev {
  color: var(--text-dim);
}

.load-arrow {
  color: var(--text-dim);
  font-size: 0.72rem;
}

.load-item-gain {
  display: flex;
  align-items: center;
  gap: 6px;
}

.gain-pct-small {
  font-size: 0.74rem;
  font-weight: 700;
}

/* Trainer Edit / Quote Box */
.trainer-edit-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.trainer-textarea {
  min-height: 100px;
  line-height: 1.5;
  font-size: 0.86rem;
  resize: vertical;
}

.trainer-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.trainer-student-quote {
  background: var(--bg-input);
  border-left: 4px solid var(--primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 16px;
}

.quote-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.trainer-avatar-mini {
  width: 36px;
  height: 36px;
  background: var(--primary);
  color: #000;
  font-weight: 900;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}

.quote-content {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-main);
  font-style: italic;
}

.quote-signature-badge {
  margin-top: 12px;
  font-size: 0.72rem;
  color: var(--text-dim);
  font-weight: 600;
}

/* Action Buttons Card */
.report-actions-card {
  background: linear-gradient(180deg, var(--bg-card) 0%, rgba(19, 27, 46, 0.95) 100%);
  border: 1px solid var(--border-color);
  padding: 20px 18px;
  border-radius: var(--radius-md);
}

.actions-card-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
}

.actions-card-subtitle {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 4px 0 16px 0;
}

.report-buttons-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ========================================================
   Consultant Dashboard & Debtors Management Enhancements
   ======================================================== */
.debtor-card {
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.debtor-card:hover {
  border-color: rgba(239, 68, 68, 0.6);
  box-shadow: 0 4px 20px rgba(239, 68, 68, 0.12);
}

.debtors-wrapper {
  animation: fadeIn 0.3s ease;
}

.expiring-item-card {
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.expiring-item-card:hover {
  border-color: var(--warning);
}

.top-student-row {
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.top-student-row:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(118, 186, 27, 0.4);
}

.feedbacks-list > div {
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.feedbacks-list > div:hover {
  border-color: rgba(6, 182, 212, 0.4);
}

/* ========================================================
   Wiki4Fit-Inspired Dashboard Layout & Components
   ======================================================== */
.wiki-header-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}

.wiki-header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}

.wiki-header-greeting h2 {
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.3px;
  margin-bottom: 4px;
}

.wiki-header-greeting p {
  color: var(--text-muted);
  font-size: 0.82rem;
  margin: 0;
}

.wiki-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.wiki-search-box {
  position: relative;
  width: 100%;
}

.wiki-search-box input {
  width: 100%;
  padding: 10px 14px 10px 38px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: #fff;
  font-size: 0.86rem;
  font-family: inherit;
  transition: all 0.2s ease;
}

.wiki-search-box input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(118, 186, 27, 0.15);
}

.wiki-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-dim);
  font-size: 1rem;
  pointer-events: none;
}

/* KPI Cards */
.wiki-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

@media (min-width: 600px) {
  .wiki-kpi-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.wiki-kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  position: relative;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.wiki-kpi-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.15);
}

.wiki-kpi-card-clickable {
  cursor: pointer;
  user-select: none;
}

.wiki-kpi-card-clickable:hover {
  transform: translateY(-2px);
  border-color: var(--primary) !important;
  box-shadow: 0 0 16px rgba(118, 186, 27, 0.25);
}

.active-student-select-card {
  transition: all 0.2s ease;
}

.active-student-select-card:hover {
  border-color: var(--primary) !important;
  background: rgba(118, 186, 27, 0.06) !important;
  box-shadow: 0 0 15px rgba(118, 186, 27, 0.2);
}

.wiki-kpi-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wiki-kpi-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.wiki-kpi-icon {
  font-size: 1.2rem;
  opacity: 0.85;
}

.wiki-kpi-val {
  font-size: 1.4rem;
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
}

.wiki-kpi-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.wiki-progress-track {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 4px;
}

.wiki-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
  border-radius: 999px;
}

/* Tracking / Acompanhamento Tabs */
.wiki-tabs-container {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 14px;
  scrollbar-width: thin;
}

.wiki-tab-pill {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  padding: 8px 14px;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.wiki-tab-pill:hover {
  border-color: var(--text-muted);
  color: #fff;
}

.wiki-tab-pill.active {
  background: rgba(118, 186, 27, 0.15);
  border-color: var(--primary);
  color: var(--primary);
}

.wiki-tab-pill.active.danger-tab {
  background: rgba(239, 68, 68, 0.15);
  border-color: var(--danger);
  color: var(--danger);
}

.wiki-tab-pill.active.warning-tab {
  background: rgba(245, 158, 11, 0.15);
  border-color: var(--warning);
  color: var(--warning);
}

.wiki-pill-badge {
  font-size: 0.7rem;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}

.wiki-tab-pill.active .wiki-pill-badge {
  background: var(--primary);
  color: #000;
  font-weight: 900;
}

.wiki-tab-pill.active.danger-tab .wiki-pill-badge {
  background: var(--danger);
  color: #fff;
}

.wiki-tab-pill.active.warning-tab .wiki-pill-badge {
  background: var(--warning);
  color: #000;
}

/* Weekly Chart Styles */
.wiki-chart-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 18px;
  margin-bottom: 20px;
}

.wiki-chart-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.74rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.wiki-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.wiki-legend-color {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.wiki-bars-wrapper {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  align-items: flex-end;
  height: 130px;
  margin: 20px 0 10px 0;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.wiki-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
  gap: 6px;
}

.wiki-dual-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  width: 100%;
  justify-content: center;
  height: 90px;
}

.wiki-bar-prev {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px 4px 0 0;
  width: 10px;
  transition: height 0.3s ease;
}

.wiki-bar-curr {
  background: linear-gradient(180deg, #7ec32a 0%, #2e7d32 100%);
  border-radius: 4px 4px 0 0;
  width: 14px;
  box-shadow: 0 0 10px rgba(118, 186, 27, 0.4);
  transition: height 0.3s ease;
}

.wiki-bar-label {
  font-size: 0.72rem;
  color: var(--text-dim);
  font-weight: 700;
}

.wiki-item-card {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  transition: all 0.2s ease;
}

.wiki-item-card:hover {
  border-color: rgba(255, 255, 255, 0.15);
}

/* Student Quick Profile & Smart Prescription System */
.student-name-click {
  cursor: pointer;
  transition: color 0.2s ease, text-shadow 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.student-name-click:hover {
  color: var(--primary) !important;
  text-shadow: 0 0 10px var(--primary-glow);
  text-decoration: underline;
}

.student-name-click::after {
  content: ' ↗';
  font-size: 0.75em;
  opacity: 0.6;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.student-name-click:hover::after {
  opacity: 1;
  transform: translate(1px, -1px);
}

.prescribe-item-card {
  transition: border-color 0.2s ease, background 0.2s ease;
}

.prescribe-item-card:hover {
  border-color: rgba(118, 186, 27, 0.45);
  background: #141822;
}

.quick-prescribe-hero-banner {
  animation: pulseSubtle 3s infinite ease-in-out;
}

@keyframes pulseSubtle {
  0%, 100% {
    box-shadow: 0 4px 15px rgba(118, 186, 27, 0.12);
  }
  50% {
    box-shadow: 0 4px 25px rgba(118, 186, 27, 0.25);
  }
}

#generic-modal .modal-box {
  max-width: 680px;
}

/* ==================== WORKOUT SPLIT TABS BAR & PILLS (COMPACT MOBILE FIRST) ==================== */
.split-presets-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}

.split-presets-title {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-dim);
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.split-presets-chips {
  display: flex;
  gap: 4px;
}

.chip-preset {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.chip-preset:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}

.chip-preset.active {
  background: var(--primary);
  color: #000;
  border-color: var(--primary);
  box-shadow: 0 0 10px var(--primary-glow);
}

.workout-split-tabs-bar {
  display: flex;
  align-items: stretch;
  gap: 5px;
  margin-bottom: 12px;
  background: var(--bg-input);
  padding: 6px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.workout-split-tabs-bar::-webkit-scrollbar {
  display: none;
}

.split-tab-pill {
  position: relative;
  flex: 1 1 0px;
  min-width: 44px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  padding: 6px 3px 4px 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--text-muted);
  user-select: none;
}

.split-tab-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}

.split-tab-pill.active {
  background: linear-gradient(135deg, rgba(118, 186, 27, 0.22) 0%, rgba(20, 23, 32, 0.98) 100%);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 0 12px var(--primary-glow);
}

.split-tab-close-btn {
  position: absolute;
  top: -6px;
  right: -5px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #181d28;
  border: 1px solid rgba(239, 68, 68, 0.7);
  color: #ef4444;
  font-size: 0.65rem;
  font-weight: 900;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  z-index: 5;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
  padding: 0;
}

.split-tab-close-btn:hover {
  background: #ef4444;
  color: #fff;
  transform: scale(1.15);
}

.split-tab-letter-badge {
  font-size: 0.85rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  margin-bottom: 2px;
}

.split-tab-pill.active .split-tab-letter-badge {
  color: var(--primary);
}

.split-tab-name-compact {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.split-tab-pill.active .split-tab-name-compact {
  color: #fff;
}

.split-tab-count-badge {
  font-size: 0.55rem;
  padding: 1px 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-dim);
  margin-top: 2px;
  line-height: 1;
}

.split-tab-count-badge.has-items {
  background: rgba(118, 186, 27, 0.25);
  color: var(--accent);
  font-weight: 700;
}

.split-tab-add-btn {
  flex: 0 0 auto;
  min-width: 44px;
  height: 48px;
  background: rgba(118, 186, 27, 0.08);
  border: 1.5px dashed var(--primary);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  cursor: pointer;
  color: var(--primary);
  font-family: var(--font-heading);
  transition: all 0.2s ease;
  padding: 4px 6px;
}

.split-tab-add-btn:hover:not(:disabled) {
  background: var(--primary);
  color: #000;
  box-shadow: 0 0 12px var(--primary-glow);
  transform: translateY(-1px);
}

.split-tab-add-btn .add-plus-icon {
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1;
}

.split-tab-add-btn .add-label {
  font-size: 0.55rem;
  font-weight: 800;
  text-transform: uppercase;
}

/* ==================== PROFESSOR TOP-LEFT MENU & DRAWER ==================== */
.btn-top-menu {
  background: rgba(118, 186, 27, 0.12);
  border: 1px solid rgba(118, 186, 27, 0.45);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 6px 11px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 800;
  font-family: var(--font-heading);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 0 10px rgba(118, 186, 27, 0.15);
}

.btn-top-menu:hover {
  background: var(--primary);
  color: #000;
  box-shadow: 0 0 16px var(--primary-glow);
  transform: translateY(-1px);
}

.btn-top-menu .menu-icon {
  font-size: 1rem;
  line-height: 1;
}

.btn-dashboard-menu {
  background: rgba(118, 186, 27, 0.12);
  border: 1px solid rgba(118, 186, 27, 0.4);
  color: #fff;
  border-radius: var(--radius-full);
  padding: 5px 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-dashboard-menu:hover {
  background: var(--primary);
  color: #000;
  border-color: var(--primary);
}

.menu-drawer-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 150;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.menu-drawer-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

/* ==================== MATERIAL DESIGN 3 MODAL NAVIGATION DRAWER ==================== */
.menu-drawer-panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 320px;
  max-width: 86vw;
  background: var(--md-sys-color-surface-container-low);
  border-radius: 0 var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0; /* 0 28px 28px 0 */
  border-right: 1px solid var(--md-sys-color-outline-variant);
  z-index: 160;
  transform: translateX(-100%);
  transition: transform 0.3s var(--md-sys-motion-easing-emphasized);
  display: flex;
  flex-direction: column;
  box-shadow: var(--md-sys-elevation-3);
  overflow: hidden;
}

.menu-drawer-panel.active {
  transform: translateX(0);
}

.menu-drawer-header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--md-sys-color-surface-container);
}

.menu-drawer-logo {
  width: 38px;
  height: 38px;
  border-radius: var(--md-sys-shape-corner-small);
  object-fit: cover;
  border: 1px solid var(--md-sys-color-primary);
  box-shadow: 0 0 10px var(--primary-glow);
}

.menu-drawer-close {
  background: transparent;
  border: none;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--md-sys-shape-corner-full);
  transition: all 0.2s var(--md-sys-motion-easing-standard);
}

.menu-drawer-close:hover {
  color: var(--md-sys-color-on-surface);
  background: rgba(255, 255, 255, var(--md-sys-state-hover-opacity));
}

.menu-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.menu-section-label {
  font-size: 0.72rem; /* M3 Title Small */
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--md-sys-color-on-surface-variant);
  margin-top: 14px;
  margin-bottom: 6px;
  padding-left: 12px;
  display: block;
}

.menu-items-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.menu-nav-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  min-height: 52px;
  border-radius: var(--md-sys-shape-corner-full); /* M3 shape-full 9999px pill */
  background: transparent;
  border: 1px solid transparent;
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: all 0.2s var(--md-sys-motion-easing-standard);
}

.menu-nav-btn:hover {
  background: var(--md-sys-color-surface-container-highest);
  color: var(--md-sys-color-on-surface);
  border-color: transparent;
  transform: none;
}

.menu-nav-payment-btn {
  background: var(--md-sys-color-primary-container);
  border: 1.5px solid var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary-container);
  box-shadow: 0 0 14px var(--primary-glow);
}

.menu-nav-payment-btn:hover {
  background: var(--md-sys-color-primary-container);
  filter: brightness(1.1);
  border-color: var(--md-sys-color-tertiary);
}

.menu-nav-btn-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-surface-container-highest);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.menu-nav-payment-btn .menu-nav-btn-icon {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  box-shadow: 0 0 10px var(--primary-glow);
}

.menu-nav-btn-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.menu-nav-btn-content strong {
  font-size: 0.9rem;
  color: #fff;
}

.menu-nav-btn-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.menu-nav-btn-arrow {
  font-size: 0.85rem;
  color: var(--text-dim);
  transition: transform 0.2s ease;
}

.menu-nav-btn:hover .menu-nav-btn-arrow {
  color: var(--primary);
  transform: translateX(2px);
}

.menu-drawer-footer {
  padding: 12px 14px;
  border-top: 1px solid var(--border-color);
  background: rgba(0, 0, 0, 0.2);
}

/* ==================== PROFESSOR PAYMENTS VIEW ==================== */
.consultant-payments-header {
  margin-bottom: 16px;
}

.payment-subtabs-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.payment-subtab-pill {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  padding: 7px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.payment-subtab-pill:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}

.payment-subtab-pill.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #000;
  font-weight: 800;
  box-shadow: 0 0 12px var(--primary-glow);
}

.student-payment-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  transition: all 0.2s ease;
}

.student-payment-card:hover {
  border-color: rgba(118, 186, 27, 0.4);
}

.student-payment-card.overdue {
  border-left: 4px solid var(--danger);
  background: rgba(239, 68, 68, 0.04);
}

.student-payment-card.pending {
  border-left: 4px solid var(--warning);
}

.student-payment-card.paid {
  border-left: 4px solid var(--primary);
}

.pix-box-card {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(20, 23, 32, 0.95) 100%);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 20px;
}

/* ==========================================================================
   ROGER GÓES - COVER / LOGIN SCREEN (REPRODUÇÃO FIEL DO MOCKUP DO USUÁRIO)
   ========================================================================== */
.auth-cover-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  background: linear-gradient(180deg, #181b22 0%, #0d0f14 55%, #08090c 100%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 26px 24px 30px 24px;
  overflow-y: auto;
  box-sizing: border-box;
}

/* Top Header & Roger Góes Logo */
.auth-cover-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 24px;
}

.auth-logo-wrapper {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.auth-logo-img {
  width: 175px;
  height: auto;
  max-width: 80%;
  border-radius: 12px;
  object-fit: contain;
  filter: drop-shadow(0 6px 20px rgba(118, 186, 27, 0.25));
}

/* Role Selector: Sou Aluno vs Sou Professor */
.auth-role-selector-container {
  width: 100%;
  max-width: 330px;
  margin: 10px auto 16px auto;
}

.auth-role-selector-title {
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
  font-weight: 700;
}

.auth-role-pill-group {
  display: flex;
  background: rgba(26, 30, 39, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 4px;
  gap: 4px;
}

.auth-role-pill {
  flex: 1;
  padding: 9px 12px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: #94a3b8;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: var(--font-family);
}

.auth-role-pill.active {
  background: #1ea838;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(30, 168, 56, 0.45);
}

.auth-role-pill:not(.active):hover {
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.05);
}

/* Form inputs matching mockup with underline */
.auth-form-card {
  width: 100%;
  max-width: 330px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: transform 0.2s ease;
}

.auth-input-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.auth-input-label {
  color: #f1f5f9;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.2px;
}

.auth-underline-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.7);
  color: #ffffff;
  font-size: 1.05rem;
  padding: 6px 0 10px 0;
  font-family: var(--font-family);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-underline-input::placeholder {
  color: rgba(148, 163, 184, 0.5);
  font-size: 0.92rem;
}

.auth-underline-input:focus {
  border-bottom: 2px solid #22c55e;
}

.auth-pass-row {
  position: relative;
  display: flex;
  align-items: center;
}

.auth-password-eye-btn {
  position: absolute;
  right: 0;
  bottom: 8px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}

.auth-password-eye-btn:hover {
  color: #ffffff;
}

/* Main Enter Button (Entrar) */
.btn-auth-enter {
  width: 100%;
  background: #1ea838;
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 700;
  padding: 13px 20px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  margin-top: 10px;
  box-shadow: 0 4px 16px rgba(30, 168, 56, 0.45);
  transition: all 0.2s ease;
  font-family: var(--font-family);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-auth-enter:hover {
  background: #22c55e;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(34, 197, 94, 0.55);
}

.btn-auth-enter:active {
  transform: translateY(1px);
}

/* Error message */
.auth-error-msg {
  color: #f87171;
  font-size: 0.85rem;
  text-align: center;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 6px;
  padding: 8px 12px;
  display: none;
}

.shake-error {
  animation: shakeBox 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes shakeBox {
  10%, 90% { transform: translate3d(-2px, 0, 0); }
  20%, 80% { transform: translate3d(4px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-6px, 0, 0); }
  40%, 60% { transform: translate3d(6px, 0, 0); }
}

/* Footer links: Esqueci minha senha & Trocar idioma */
.auth-links-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
  margin-bottom: 10px;
}

.auth-link-forgot {
  background: transparent;
  border: none;
  color: #f1f5f9;
  font-size: 0.92rem;
  text-decoration: underline;
  cursor: pointer;
  font-family: var(--font-family);
  padding: 4px;
  transition: color 0.2s;
}

.auth-link-forgot:hover {
  color: #86efac;
}

.auth-btn-switch-lang {
  background: #188632;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 8px 20px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-family);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
}

.auth-btn-switch-lang:hover {
  background: #1fa33f;
}

/* Quick Demo Bar for Testing */
.auth-quick-fill-section {
  width: 100%;
  max-width: 330px;
  margin: 16px auto 0 auto;
  padding: 12px;
  background: rgba(20, 23, 32, 0.7);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  text-align: center;
}

.auth-quick-title {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  display: block;
}

.auth-quick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.auth-demo-chip {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 5px 9px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.auth-demo-chip:hover {
  background: var(--primary);
  color: #0c0e12;
  border-color: var(--primary);
}

.auth-demo-chip.coach {
  border-color: rgba(118, 186, 27, 0.4);
  color: #86efac;
}

/* Top bar User Profile Badge & Logout */
.topbar-user-profile {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(20, 23, 32, 0.95);
  border: 1px solid var(--border-color);
  padding: 4px 8px 4px 6px;
  border-radius: 999px;
}

.user-profile-badge {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-avatar-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-card-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  border: 1.5px solid var(--border-color);
}

.user-avatar-circle.coach {
  background: linear-gradient(135deg, #1ea838 0%, #76ba1b 100%);
  border-color: var(--accent);
}

.user-avatar-circle.student {
  background: #1e293b;
  border-color: #38bdf8;
  color: #38bdf8;
}

.user-info-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.user-name-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  max-width: 105px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-role-label {
  font-size: 0.65rem;
  color: var(--text-muted);
}

.btn-logout-icon {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 3px;
  transition: all 0.2s ease;
  font-family: var(--font-family);
}

.btn-logout-icon:hover {
  background: #ef4444;
  color: #ffffff;
  border-color: #ef4444;
}

@media (max-width: 420px) {
  .logout-text-label {
    display: none;
  }
}

/* ==================== STUDENT WORKOUT SPLIT TABS (MOBILE OPTIMIZED) ==================== */
.student-split-bar-section {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%;
}

.student-split-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.student-split-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.student-split-pills-bar {
  display: flex;
  width: 100%;
  gap: 4px;
  align-items: stretch;
}

.student-split-pill {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: rgba(20, 23, 32, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 6px 2px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--text-muted);
  font-family: var(--font-family);
  box-sizing: border-box;
  text-align: center;
  white-space: nowrap;
}

.student-split-pill:hover {
  border-color: var(--primary);
  color: #fff;
}

.student-split-pill.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #0c0e12;
  font-weight: 800;
  box-shadow: 0 0 10px var(--primary-glow);
}

.student-split-text {
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .workout-header-card {
    padding: 14px 12px;
  }
  .student-split-pills-bar,
  .routine-pills {
    gap: 3px;
  }
  .student-split-pill,
  .pill-btn {
    font-size: 0.68rem;
    padding: 6px 1px;
    letter-spacing: -0.2px;
  }
}

@media (max-width: 375px) {
  .tab-txt-prefix {
    display: none;
  }
  .student-split-pill,
  .pill-btn {
    font-size: 0.78rem;
    font-weight: 800;
    padding: 7px 0;
  }
}

/* ==================== MONTHLY REPORT EVOLUTION SPLIT TABS ==================== */
.report-split-tabs-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px 10px 2px;
  margin-bottom: 12px;
  scrollbar-width: thin;
}

.report-split-tabs-bar::-webkit-scrollbar {
  height: 4px;
}
.report-split-tabs-bar::-webkit-scrollbar-thumb {
  background: rgba(118, 186, 27, 0.3);
  border-radius: 4px;
}

.report-split-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(20, 23, 32, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 6px 12px;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  font-family: var(--font-family);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.report-split-tab-btn:hover {
  background: rgba(118, 186, 27, 0.12);
  border-color: var(--primary);
  color: #ffffff;
  transform: translateY(-1px);
}

.report-split-tab-btn.active {
  background: linear-gradient(135deg, rgba(118, 186, 27, 0.25) 0%, rgba(30, 168, 56, 0.2) 100%);
  border-color: var(--primary);
  color: #ffffff;
  box-shadow: 0 0 10px rgba(118, 186, 27, 0.35);
}

.report-split-tab-btn .tab-count {
  font-size: 0.7rem;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 700;
}

.report-split-tab-btn.active .tab-count {
  background: var(--primary);
  color: #0c0e12;
  box-shadow: 0 0 6px var(--primary-glow);
}

/* ==================== VIDEO UPLOAD ZONE ==================== */
.video-upload-zone:hover {
  border-color: var(--primary) !important;
  background: rgba(118, 186, 27, 0.08) !important;
}

.video-source-pills .btn.active {
  box-shadow: 0 0 10px rgba(118, 186, 27, 0.35);
}

/* ==================== CLOSED GATE & AUTHORIZED ACCESS ==================== */
.auth-access-gate-card {
  width: 100%;
  max-width: 330px;
  margin: 16px auto 0 auto;
  padding: 14px 12px;
  background: rgba(20, 23, 32, 0.85);
  border: 1px solid rgba(118, 186, 27, 0.35);
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.auth-gate-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(118, 186, 27, 0.15);
  color: var(--primary);
  border: 1px solid var(--primary);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.auth-gate-text {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin: 0 0 10px 0;
}

.btn-request-access {
  width: 100%;
  background: transparent;
  border: 1px dashed var(--primary);
  color: #86efac;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-family);
}

.btn-request-access:hover {
  background: rgba(118, 186, 27, 0.12);
  border-style: solid;
  color: #ffffff;
  transform: translateY(-1px);
}

/* ==================== SHAPED EVALUATION SYSTEM STYLES (web.shaped.com.br) ==================== */
.shaped-brand-header {
  background: linear-gradient(135deg, rgba(20, 23, 32, 0.95) 0%, rgba(12, 14, 18, 0.98) 100%);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  margin-bottom: 14px;
}

.shaped-brand-logo {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
  border: 2px solid var(--primary);
  box-shadow: 0 0 12px var(--primary-glow);
  flex-shrink: 0;
}

.shaped-ai-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #a7f3d0;
}

.shaped-metric-hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.shaped-metric-box {
  background: rgba(20, 23, 32, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.2s ease;
}

.shaped-metric-box:hover {
  border-color: rgba(118, 186, 27, 0.35);
  transform: translateY(-1px);
}

.shaped-metric-box.primary-glow-box {
  border-color: rgba(118, 186, 27, 0.4);
  background: linear-gradient(145deg, rgba(118, 186, 27, 0.08) 0%, rgba(20, 23, 32, 0.9) 100%);
}

.shaped-metric-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.shaped-metric-lbl {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.shaped-metric-icon {
  font-size: 1rem;
}

.shaped-metric-value-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}

.shaped-metric-val {
  font-size: 1.55rem;
  font-weight: 900;
  letter-spacing: -0.5px;
}

.shaped-metric-subtext {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
}

.shaped-gauge-track {
  width: 100%;
  height: 5px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 4px;
}

.shaped-gauge-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
}

.shaped-subcard {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 12px 14px;
}

.shaped-photo-thumb-card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  height: 160px;
  background: #000;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: all 0.2s ease;
}

.shaped-photo-thumb-card:hover {
  border-color: var(--primary);
  transform: scale(1.02);
}

.shaped-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shaped-thumb-label {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: 0.5px;
}

/* ==================== SHAPED SUBMIT STEPPER ==================== */
.shaped-stepper-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 8px 14px;
  overflow-x: auto;
}

.shaped-step-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-dim);
  white-space: nowrap;
}

.shaped-step-pill.active {
  color: #fff;
}

.shaped-step-pill.active .step-num {
  background: var(--primary);
  color: #0c0e12;
  box-shadow: 0 0 8px var(--primary-glow);
}

.shaped-step-pill.done .step-num {
  background: #10b981;
  color: #0c0e12;
}

.shaped-step-pill .step-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 800;
}

.shaped-step-divider {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 0 8px;
  min-width: 12px;
}

/* Guidelines Grid */
.shaped-guidelines-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.shaped-guide-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 14px;
  text-align: center;
}

.shaped-guide-card .guide-icon {
  font-size: 2rem;
  margin-bottom: 6px;
}

.shaped-guide-card strong {
  display: block;
  color: #fff;
  font-size: 0.88rem;
  margin-bottom: 4px;
}

.shaped-guide-card p {
  color: var(--text-muted);
  font-size: 0.74rem;
  line-height: 1.4;
  margin: 0;
}

/* Upload Slots with Silhouette Guides */
.shaped-upload-slots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.shaped-photo-slot {
  background: rgba(20, 23, 32, 0.8);
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.2s ease;
}

.shaped-photo-slot.has-photo {
  border-style: solid;
  border-color: var(--primary);
}

.shaped-photo-slot .slot-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.35);
  font-size: 0.76rem;
  color: #fff;
}

.shaped-photo-slot .slot-body {
  position: relative;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: #080a0f;
  overflow: hidden;
}

.slot-loaded-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.btn-slot-replace {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid #fff;
  color: #fff;
  font-size: 0.68rem;
  padding: 2px 8px;
  border-radius: 6px;
  cursor: pointer;
}

.silhouette-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 10px;
}

.svg-sil {
  width: 60px;
  height: 120px;
  margin-bottom: 8px;
  animation: silPulse 2s infinite ease-in-out;
}

@keyframes silPulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.03); }
}

.silhouette-hint {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-align: center;
  font-weight: 600;
}

/* ==================== AI SCANNER ANIMATION ==================== */
.shaped-ai-scanner-box {
  position: relative;
  width: 140px;
  height: 200px;
  margin: 0 auto;
  border: 2px solid rgba(118, 186, 27, 0.4);
  border-radius: 14px;
  overflow: hidden;
  background: #080a0f;
  box-shadow: 0 0 24px rgba(118, 186, 27, 0.25);
}

.ai-scan-silhouette {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.svg-scan-active {
  width: 70px;
  height: 140px;
}

.ai-scan-beam {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, #76ba1b, #10b981, transparent);
  box-shadow: 0 0 12px #76ba1b;
  animation: scanBeam 1.8s infinite alternate ease-in-out;
}

@keyframes scanBeam {
  0% { top: 0%; }
  100% { top: 98%; }
}

/* Media Query Mobile */
@media (max-width: 480px) {
  .shaped-metric-hero-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .shaped-metric-val {
    font-size: 1.35rem;
  }
  .shaped-guidelines-grid {
    grid-template-columns: 1fr;
  }
  .shaped-upload-slots-grid {
    grid-template-columns: 1fr;
  }
}

/* Central de Recebimento de Avaliações & Tokens */
.photo-thumb-box {
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.photo-thumb-box:hover {
  transform: scale(1.03);
  border-color: var(--primary) !important;
  box-shadow: 0 4px 15px rgba(118, 186, 27, 0.3);
}

.received-assessment-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.received-assessment-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

@keyframes shakeAnimation {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}

.shake {
  animation: shakeAnimation 0.5s ease;
}

/* ==================== CAPA DO ALUNO (ESTILO MOCKUP OFICIAL) ==================== */
.student-hero-cover {
  background: linear-gradient(180deg, #13421e 0%, #0d2813 50%, #111418 100%);
  padding: 28px 16px 20px 16px;
  margin: -16px -16px 16px -16px;
  text-align: center;
  position: relative;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.student-cover-avatar-container {
  position: relative;
  display: inline-block;
  margin: 0 auto 14px auto;
}

.student-cover-avatar {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--primary);
  box-shadow: 0 0 25px rgba(143, 232, 37, 0.45);
  background: #000;
  display: block;
}

.student-cover-camera-badge {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 40px;
  height: 40px;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.55);
  cursor: pointer;
  border: 2.5px solid #111418;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.student-cover-camera-badge:hover {
  transform: scale(1.12);
  box-shadow: 0 5px 15px rgba(143, 232, 37, 0.6);
}

.student-cover-greeting {
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.45rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.3px;
}

/* ==================== CARDIOVASCULAR TRAINING STYLES ==================== */
.cardio-hero-card {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(20, 23, 32, 0.95));
  border: 1.5px solid rgba(239, 68, 68, 0.35);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
}

.cardio-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.cardio-stat-box {
  background: var(--md-sys-color-surface-container-high);
  border-radius: 10px;
  padding: 10px 12px;
  border: 1px solid var(--md-sys-color-outline-variant);
}

.cardio-stat-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  color: var(--md-sys-color-on-surface-variant);
  font-weight: 700;
  letter-spacing: 0.03em;
  display: block;
  margin-bottom: 2px;
}

.cardio-stat-val {
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
}

.cardio-timer-display {
  font-family: 'Montserrat', monospace;
  font-size: 2.8rem;
  font-weight: 800;
  letter-spacing: 2px;
  color: #ef4444;
  text-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
  text-align: center;
  padding: 14px 0 8px 0;
}

.cardio-timer-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.cardio-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.cardio-table th {
  text-align: left;
  padding: 8px 10px;
  color: var(--md-sys-color-on-surface-variant);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.cardio-table td {
  padding: 9px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--md-sys-color-on-surface);
}

/* Card de Destaque / Banner da Capa do Treino */
.student-workout-card-cover {
  background: linear-gradient(135deg, #a3e635 0%, #c4f15d 50%, #d9f99d 100%);
  border-radius: 16px;
  padding: 16px 18px;
  color: #0d2914;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.student-workout-cover-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.student-workout-cover-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.student-workout-cover-play-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: #475569;
  color: #ffffff;
  border-radius: 6px;
  font-size: 12px;
}

.student-workout-cover-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f2d16;
  margin: 0;
}

.student-workout-cover-logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
  opacity: 0.9;
}

.student-workout-cover-expiry {
  font-size: 0.92rem;
  font-weight: 700;
  color: #111418;
  margin: 10px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.student-workout-cover-goal-pill {
  background: #ffffff;
  color: #166534;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 0.74rem;
  display: inline-block;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
}

/* ==================== MAIN TABS DO ALUNO (TREINO NEUROMUSCULAR VS FEED) ==================== */
.student-main-tab-bar {
  display: flex;
  gap: 6px;
  padding: 4px;
  background: var(--md-sys-color-surface-container);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-full);
  margin: 14px 0 16px 0;
}

.student-main-tab-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: var(--md-sys-shape-corner-full);
  font-size: 0.82rem;
  font-weight: 700;
  border: none;
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
  transition: all 0.2s var(--md-sys-motion-easing-standard);
  text-align: center;
  white-space: nowrap;
}

.student-main-tab-btn.active {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  box-shadow: var(--md-sys-elevation-1);
}

.student-main-tab-btn:hover:not(.active) {
  background: var(--md-sys-color-surface-container-highest);
  color: var(--md-sys-color-on-surface);
}

/* Feed e Check-in Cards */
.student-feed-card {
  background: var(--md-sys-color-surface-container);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
}

.student-checkin-banner {
  background: linear-gradient(135deg, rgba(143, 232, 37, 0.15), rgba(20, 23, 32, 0.95));
  border: 1.5px solid rgba(143, 232, 37, 0.4);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.student-feed-illustration-img {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 14px;
}

.student-feed-tip-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--md-sys-color-surface-container-high);
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 8px;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--md-sys-color-on-surface);
}

/* ==================== PLANILHA DE CORRIDA & CARDIO (EXCEL FIDELITY) ==================== */
.running-sheet-card {
  background: var(--md-sys-color-surface-container);
  border: 1.5px solid var(--md-sys-color-outline-variant);
  border-radius: 18px;
  padding: 18px;
  margin-bottom: 18px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.running-sheet-banner {
  text-align: center;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
}

.running-sheet-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.55rem;
  font-weight: 900;
  letter-spacing: 3px;
  color: #ffffff;
  text-transform: uppercase;
  margin: 0 0 4px 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.running-sheet-subtitle {
  font-size: 0.76rem;
  color: var(--primary);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Header Cells: FC Max, Repouso, Obj */
.running-sheet-header-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 2fr;
  gap: 8px;
  margin-bottom: 16px;
}

@media (max-width: 640px) {
  .running-sheet-header-grid {
    grid-template-columns: 1fr;
  }
}

.running-sheet-header-cell {
  background: var(--md-sys-color-surface-container-high);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.running-sheet-header-label {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--md-sys-color-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.running-sheet-header-val {
  font-size: 0.95rem;
  font-weight: 800;
  color: #ffffff;
}

/* Section Titles */
.running-sheet-section-title {
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--primary);
  margin: 14px 0 8px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Horizontal Scroll Wrapper */
.running-sheet-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 10px;
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  background: #15181e;
  margin-bottom: 16px;
}

.running-sheet-scroll::-webkit-scrollbar {
  height: 6px;
}
.running-sheet-scroll::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 4px;
}
.running-sheet-scroll::-webkit-scrollbar-track {
  background: #111418;
}

/* Table Style Matching Excel */
.running-excel-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 0.78rem;
  text-align: center;
}

.running-excel-table th,
.running-excel-table td {
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 7px 8px;
  vertical-align: middle;
}

/* Zones Table */
.running-zones-table th {
  background: #252b36;
  color: #e2e8f0;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.running-zones-table td {
  background: #1a1e26;
  color: #f1f5f9;
  font-weight: 600;
}

.running-zones-table tr:nth-child(even) td {
  background: #161a22;
}

.running-zone-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
}
.running-zone-badge-1 { background: rgba(56, 189, 248, 0.18); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.4); }
.running-zone-badge-2 { background: rgba(74, 222, 128, 0.18); color: #4ade80; border: 1px solid rgba(74, 222, 128, 0.4); }
.running-zone-badge-3 { background: rgba(250, 204, 21, 0.18); color: #facc15; border: 1px solid rgba(250, 204, 21, 0.4); }
.running-zone-badge-4 { background: rgba(251, 146, 60, 0.18); color: #fb923c; border: 1px solid rgba(251, 146, 60, 0.4); }
.running-zone-badge-5 { background: rgba(248, 113, 113, 0.18); color: #f87171; border: 1px solid rgba(248, 113, 113, 0.4); }

/* Weekly Schedule Distinctive Row Colors (Faithful to Excel Photo) */
.running-th-dias {
  background: #4a2c2a !important; /* Brown/Dark Header from Photo */
  color: #ffffff !important;
  font-weight: 900 !important;
  font-size: 0.78rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.running-th-tempo-sub {
  background: #252b36;
  color: #cbd5e1;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* MINUTOS (Red) */
.running-row-red {
  background: #c62828 !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.running-row-red-label {
  background: #b71c1c !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  text-align: left;
  padding-left: 10px !important;
}

/* AQUECIMENTO (Blue) */
.running-header-blue {
  background: #0284c7 !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.running-label-blue {
  background: rgba(2, 132, 199, 0.18) !important;
  color: #38bdf8 !important;
  font-weight: 800 !important;
  text-align: left;
  padding-left: 10px !important;
  border-left: 3px solid #0284c7 !important;
}

/* CORRIDA / HORA DA CORRIDA (Yellow/Amber) */
.running-header-yellow {
  background: #eab308 !important;
  color: #111827 !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.running-label-yellow {
  background: rgba(234, 179, 8, 0.18) !important;
  color: #facc15 !important;
  font-weight: 800 !important;
  text-align: left;
  padding-left: 10px !important;
  border-left: 3px solid #eab308 !important;
}

/* DESACELERAR (Green) */
.running-header-green {
  background: #16a34a !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.running-label-green {
  background: rgba(22, 163, 74, 0.18) !important;
  color: #4ade80 !important;
  font-weight: 800 !important;
  text-align: left;
  padding-left: 10px !important;
  border-left: 3px solid #16a34a !important;
}

/* Normal cell values */
.running-cell-val {
  background: #181d26;
  color: #f8fafc;
  font-weight: 600;
  font-size: 0.77rem;
}
.running-cell-val:hover {
  background: #202632;
}

/* Inputs for Coach Editor */
.running-sheet-input {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  color: #ffffff;
  font-size: 0.76rem;
  width: 100%;
  padding: 5px 6px;
  text-align: center;
  font-weight: 600;
  transition: all 0.2s ease;
}
.running-sheet-input:focus {
  outline: none;
  border-color: var(--primary);
  background: #0f172a;
  box-shadow: 0 0 8px rgba(118, 186, 27, 0.4);
}

.running-sheet-input-header {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
  width: 100%;
  padding: 6px 10px;
}

/* Module Switcher in Prescription Modal */
.prescription-module-switcher {
  display: flex;
  gap: 8px;
  padding: 4px;
  background: var(--md-sys-color-surface-container);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-full);
  margin-bottom: 16px;
}

.prescription-module-pill {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--md-sys-shape-corner-full);
  font-size: 0.84rem;
  font-weight: 800;
  border: none;
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
  transition: all 0.2s var(--md-sys-motion-easing-standard);
  text-align: center;
}

.prescription-module-pill.active {
  background: var(--primary);
  color: #0b220d;
  box-shadow: 0 2px 10px rgba(118, 186, 27, 0.4);
}

.prescription-module-pill:hover:not(.active) {
  background: var(--md-sys-color-surface-container-highest);
  color: var(--md-sys-color-on-surface);
}

/* Day selector pills for student on mobile */
.running-days-chips-bar {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 4px 2px 8px 2px;
  margin-bottom: 10px;
}
.running-day-chip {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.74rem;
  font-weight: 700;
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.running-day-chip.active {
  background: var(--primary);
  color: #0c2b12;
  border-color: var(--primary);
}

/* ==================== ABAS GRANDES DE TREINOS DO ALUNO ==================== */
.student-large-routines-section {
  margin-top: 10px;
  margin-bottom: 24px;
}

.student-large-routines-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

@media (max-width: 360px) {
  .student-large-routines-grid {
    grid-template-columns: 1fr;
  }
}

.routine-large-card {
  background: #181a1e;
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.2, 0, 0, 1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  position: relative;
  text-decoration: none;
}

.routine-large-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary);
  box-shadow: 0 8px 24px rgba(118, 186, 27, 0.3);
}

.routine-large-card:active {
  transform: scale(0.97);
}

.routine-large-card-body {
  padding: 22px 12px 18px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 145px;
  background: radial-gradient(circle at center, rgba(118, 186, 27, 0.09) 0%, transparent 70%);
}

.routine-large-icon-wrapper {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.routine-large-icon {
  width: 64px;
  height: 64px;
}

.routine-large-card-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.96rem;
  font-weight: 800;
  color: #76ba1b;
  margin: 0;
  text-align: center;
  line-height: 1.25;
  letter-spacing: 0.5px;
  text-shadow: 0 0 12px rgba(118, 186, 27, 0.35);
}

.routine-large-card-footer {
  background: #f1f5f9;
  color: #1e293b;
  padding: 8px 12px;
  font-size: 0.76rem;
  font-weight: 800;
  text-align: center;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  letter-spacing: 0.3px;
}

.btn-top-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(118, 186, 27, 0.15);
  border: 1.5px solid var(--primary);
  color: var(--primary);
  font-size: 1.3rem;
  font-weight: 900;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-top-back-btn:hover {
  background: var(--primary);
  color: #0b220d;
}

/* =========================================================================
   MODAL DE SOBRECARGA PROGRESSIVA (DOUBLE PROGRESSION +5%)
   ========================================================================= */
.progression-celebration-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.progression-celebration-card {
  background: #0e1424;
  border: 2px solid rgba(16, 185, 129, 0.5);
  box-shadow: 0 20px 40px rgba(16, 185, 129, 0.2);
  border-radius: 24px;
  max-width: 420px;
  width: 100%;
  padding: 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
  color: #f1f5f9;
}

.progression-fire-badge {
  width: 60px;
  height: 60px;
  margin: 0 auto 12px;
  border-radius: 18px;
  background: linear-gradient(135deg, #10b981, #0d9488);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
}

.progression-pill-tag {
  display: inline-block;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #34d399;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 8px;
}

.progression-title {
  font-size: 1.25rem;
  font-weight: 900;
  color: #ffffff;
  margin: 0 0 4px;
}

.progression-sub {
  font-size: 0.8rem;
  color: #94a3b8;
  margin: 0 0 16px;
}

.progression-comparison-box {
  background: #090d16;
  border: 1px solid #1e293b;
  border-radius: 16px;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 16px;
}

.progression-col {
  display: flex;
  flex-direction: column;
}

.progression-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  color: #64748b;
  letter-spacing: 0.5px;
}

.progression-val {
  font-size: 1.5rem;
  font-weight: 900;
  color: #cbd5e1;
}

.progression-val.highlight {
  color: #34d399;
}

.progression-arrow-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.progression-pct-badge {
  font-size: 10px;
  font-weight: 900;
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.progression-arrow {
  color: #34d399;
  font-size: 1.1rem;
}

.progression-message-box {
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid #1e293b;
  border-radius: 14px;
  padding: 14px;
  text-align: left;
  font-size: 0.76rem;
  color: #cbd5e1;
  line-height: 1.5;
  margin-bottom: 14px;
}

.progression-message-box strong {
  color: #ffffff;
  display: block;
  margin-bottom: 4px;
}

.progression-coach-alert {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.72rem;
  color: #94a3b8;
  background: rgba(15, 23, 42, 0.5);
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid rgba(30, 41, 59, 0.8);
  margin-bottom: 16px;
}

.pulsing-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34d399;
  animation: pulseGlow 1.5s infinite;
}

.btn-progression-confirm {
  width: 100%;
  padding: 14px;
  background: linear-gradient(90deg, #10b981, #0d9488);
  color: #022c22;
  font-weight: 900;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(16, 185, 129, 0.25);
  transition: transform 0.1s ease, filter 0.2s ease;
}

.btn-progression-confirm:hover {
  filter: brightness(1.1);
}

.btn-progression-confirm:active {
  transform: scale(0.98);
}

/* ==================== BADGES E BANNERS DE DUPLA PROGRESSÃO (SOBRECARGA +5%) ==================== */
.next-session-progression-banner {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.16) 0%, rgba(14, 20, 36, 0.95) 100%);
  border: 1.5px solid rgba(16, 185, 129, 0.45);
  border-radius: 12px;
  padding: 10px 14px;
  margin: 10px 14px 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.15);
  animation: fadeInProg 0.3s ease-out;
}

.next-session-badge-icon {
  font-size: 1.5rem;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(16, 185, 129, 0.4));
}

.next-session-badge-content {
  flex: 1;
}

.next-session-badge-title {
  font-size: 0.68rem;
  font-weight: 800;
  color: #34d399;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 2px;
}

.next-session-badge-desc {
  font-size: 0.78rem;
  color: #e2e8f0;
  line-height: 1.4;
}

.next-session-badge-desc strong {
  color: #ffffff;
}

.badge-progression-active-pill {
  background: rgba(16, 185, 129, 0.25);
  border: 1px solid rgba(16, 185, 129, 0.5);
  color: #34d399;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: 0.4px;
}

/* Banner de Notificação ao Vivo Durante a Sessão */
.progression-live-badge {
  background: linear-gradient(135deg, rgba(234, 88, 12, 0.16) 0%, rgba(14, 20, 36, 0.95) 100%);
  border: 1.5px solid rgba(249, 115, 22, 0.5);
  border-radius: 12px;
  padding: 10px 14px;
  margin: 10px 14px 12px 14px;
  box-shadow: 0 4px 16px rgba(249, 115, 22, 0.2);
  animation: pulseGlowOrange 2s infinite ease-in-out;
}

.prog-live-inner {
  display: flex;
  align-items: center;
  gap: 10px;
}

.prog-live-fire {
  font-size: 1.6rem;
  line-height: 1;
  animation: fireBounce 1.2s infinite ease-in-out;
}

.prog-live-text {
  flex: 1;
}

.prog-live-title {
  font-size: 0.68rem;
  font-weight: 900;
  color: #fb923c;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.prog-live-desc {
  font-size: 0.77rem;
  color: #cbd5e1;
  line-height: 1.35;
}

.prog-live-desc strong {
  color: #ffffff;
}

.badge-prog-next-tag {
  background: rgba(249, 115, 22, 0.25);
  border: 1px solid rgba(249, 115, 22, 0.6);
  color: #fdba74;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: 14px;
  white-space: nowrap;
}

/* Inputs de Carga Recomendada */
.input-set-weight.input-weight-recommended {
  border-color: rgba(16, 185, 129, 0.7) !important;
  background: rgba(16, 185, 129, 0.12) !important;
  color: #34d399 !important;
  font-weight: 800 !important;
}

.badge-load-recommended-pill {
  position: absolute;
  top: -7px;
  right: -5px;
  background: #10b981;
  color: #022c22;
  font-size: 0.58rem;
  font-weight: 900;
  padding: 1px 4px;
  border-radius: 6px;
  line-height: 1.2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  letter-spacing: 0.3px;
}

/* Card de Resumo de Progressões no Encerramento */
.workout-progressions-summary-card {
  background: rgba(15, 23, 42, 0.85);
  border: 1.5px solid rgba(16, 185, 129, 0.4);
  border-radius: 16px;
  padding: 14px 16px;
  margin: 16px 0;
  text-align: left;
}

.summary-prog-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.summary-prog-fire {
  font-size: 1.6rem;
  line-height: 1;
}

.summary-prog-title {
  font-size: 0.92rem;
  font-weight: 800;
  color: #34d399;
  margin: 0;
}

.summary-prog-desc {
  font-size: 0.75rem;
  color: #94a3b8;
  margin: 2px 0 0 0;
}

.summary-prog-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.summary-prog-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(2, 6, 23, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 8px 12px;
  border-radius: 10px;
  flex-wrap: wrap;
  gap: 6px;
}

.summary-prog-item-info {
  display: flex;
  flex-direction: column;
}

.summary-prog-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: #ffffff;
}

.summary-prog-badge-reset {
  font-size: 0.68rem;
  color: #94a3b8;
}

.summary-prog-item-weight {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
}

.summary-prog-old {
  color: #64748b;
  text-decoration: line-through;
}

.summary-prog-arrow {
  color: #34d399;
  font-weight: bold;
}

.summary-prog-new {
  color: #34d399;
  font-weight: 800;
}

.summary-prog-new small {
  color: #10b981;
  font-size: 0.7rem;
}

@keyframes fireBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.1); }
}

@keyframes pulseGlowOrange {
  0%, 100% { box-shadow: 0 4px 16px rgba(249, 115, 22, 0.2); }
  50% { box-shadow: 0 4px 22px rgba(249, 115, 22, 0.45); }
}

@keyframes fadeInProg {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==================== GESTÃO DE ALUNOS & AUTOMATIZAÇÃO DE CADASTRO ==================== */
.students-management-wrapper {
  padding: 4px 0 24px 0;
}

.students-filter-card {
  background: rgba(30, 41, 59, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 18px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(12px);
}

.students-search-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.students-search-box {
  position: relative;
  flex: 1;
  min-width: 260px;
}

.students-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 0.95rem;
  color: var(--text-dim);
}

.students-search-input {
  width: 100%;
  padding: 10px 36px 10px 38px;
  background: #090d16;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #fff;
  font-size: 0.88rem;
  transition: all 0.2s ease;
}

.students-search-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 12px var(--primary-glow);
}

.students-search-clear {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 1.25rem;
  padding: 0;
  line-height: 1;
}

.students-view-toggle {
  display: flex;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 3px;
  border-radius: 10px;
  gap: 4px;
}

.btn-view-toggle {
  background: transparent;
  border: none;
  color: #94a3b8;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-view-toggle.active {
  background: var(--primary);
  color: #0b1302;
  font-weight: 800;
  box-shadow: 0 2px 8px var(--primary-glow);
}

.students-pills-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.students-pill-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.filter-group-lbl {
  font-size: 0.72rem;
  color: var(--text-dim);
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin-right: 4px;
}

.filter-pill {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-pill:hover {
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.filter-pill.active {
  background: rgba(118, 186, 27, 0.15);
  border-color: var(--primary);
  color: #a3e635;
  font-weight: 800;
}

.form-control-compact {
  background: #090d16;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #fff;
  padding: 6px 10px;
  font-size: 0.78rem;
  cursor: pointer;
}

/* CARDS VIEW */
.students-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 16px;
}

.student-pro-card {
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.65) 0%, rgba(15, 23, 42, 0.85) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.student-pro-card:hover {
  border-color: rgba(118, 186, 27, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
}

.student-pro-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

.student-pro-identity {
  display: flex;
  align-items: center;
  gap: 12px;
}

.student-avatar-badge {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(118, 186, 27, 0.2), rgba(16, 185, 129, 0.15));
  border: 1.5px solid var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: #a3e635;
  font-size: 1.1rem;
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(118, 186, 27, 0.25);
}

.student-pro-name {
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  cursor: pointer;
  transition: color 0.15s;
}

.student-pro-name:hover {
  color: var(--primary);
}

.student-pro-contacts {
  font-size: 0.78rem;
  color: var(--text-dim);
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}

.student-contact-link {
  color: var(--text-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.student-contact-link:hover {
  color: #fff;
}

.student-pro-badges {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}

/* Badges */
.badge-status-ativo {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 800;
}

.badge-status-pendente {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 800;
}

.badge-status-inativo {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.35);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 800;
}

.badge-plan-tag {
  background: rgba(168, 85, 247, 0.14);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 700;
}

.badge-goal-tag {
  background: rgba(59, 130, 246, 0.14);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  display: inline-block;
}

/* Metrics Grid in Card */
.student-pro-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  background: rgba(0, 0, 0, 0.35);
  padding: 10px 12px;
  border-radius: 12px;
  margin: 10px 0 12px 0;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.pro-metric-box {
  display: flex;
  flex-direction: column;
}

.pro-metric-lbl {
  font-size: 0.64rem;
  color: var(--text-dim);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.pro-metric-val {
  font-size: 0.82rem;
  font-weight: 800;
  color: #fff;
  margin-top: 2px;
}

.pro-imc-pill {
  font-size: 0.68rem;
  padding: 1px 5px;
  border-radius: 4px;
  display: inline-block;
  font-weight: 700;
}

.pro-imc-normal { background: rgba(16, 185, 129, 0.2); color: #34d399; }
.pro-imc-sobrepeso { background: rgba(245, 158, 11, 0.2); color: #fbbf24; }
.pro-imc-baixo { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
.pro-imc-obesidade { background: rgba(239, 68, 68, 0.2); color: #f87171; }

.student-pro-footer-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  color: var(--text-dim);
  margin-bottom: 12px;
}

.student-pro-action-btns {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* TABLE VIEW */
.students-table-responsive {
  overflow-x: auto;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(30, 41, 59, 0.4);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.students-data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.82rem;
}

.students-data-table th {
  background: rgba(15, 23, 42, 0.85);
  color: #94a3b8;
  font-size: 0.7rem;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}

.students-data-table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #cbd5e1;
  vertical-align: middle;
}

.students-data-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

/* STUDENT MODAL FORM STYLES */
.student-modal-box {
  max-width: 680px !important;
  max-height: 88vh;
  overflow-y: auto;
  padding: 24px;
}

.student-sheet-modal-box {
  max-width: 720px !important;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px;
}

.student-form-fieldset {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

.fieldset-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.fieldset-badge {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary);
  color: #0b1302;
  font-weight: 900;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 8px var(--primary-glow);
}

.fieldset-title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 800;
  color: #fff;
}

.imc-preview-tag {
  background: #090d16;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #a3e635;
  text-align: center;
}

.field-error-text {
  color: #f87171;
  font-size: 0.72rem;
  margin-top: 3px;
  display: block;
}

/* ==================== PWA & RESPONSIVE DESKTOP/MOBILE SYSTEM ==================== */

/* 1. Desktop Top Navigation (Horizontal Menu) */
.desktop-top-nav {
  display: none;
}

.desktop-nav-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-family: var(--font-family);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.desktop-nav-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.desktop-nav-btn.active {
  background: rgba(118, 186, 27, 0.15);
  border-color: rgba(118, 186, 27, 0.4);
  color: var(--primary);
  font-weight: 700;
  box-shadow: 0 0 10px rgba(118, 186, 27, 0.12);
}

/* 2. Top Bar PWA Install Button */
.btn-install-pwa-top {
  display: none;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(118, 186, 27, 0.2) 0%, rgba(34, 197, 94, 0.28) 100%);
  border: 1px solid var(--primary);
  color: #fff;
  font-family: var(--font-family);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 0 12px rgba(118, 186, 27, 0.25);
  animation: pwaPulse 3s infinite;
}

.btn-install-pwa-top:hover {
  background: var(--primary);
  color: #0b1302;
  box-shadow: 0 0 18px var(--primary-glow);
  transform: translateY(-1px);
}

@keyframes pwaPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(118, 186, 27, 0.2); }
  50% { box-shadow: 0 0 16px rgba(118, 186, 27, 0.5); }
}

/* 3. In-App PWA Install Banner */
.pwa-install-banner {
  background: linear-gradient(135deg, rgba(118, 186, 27, 0.16) 0%, rgba(13, 20, 31, 0.95) 100%);
  border: 1px solid rgba(118, 186, 27, 0.35);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.pwa-banner-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pwa-banner-icon {
  font-size: 1.8rem;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(118, 186, 27, 0.4));
}

.pwa-banner-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pwa-banner-text strong {
  color: #fff;
  font-size: 0.9rem;
  letter-spacing: -0.2px;
}

.pwa-banner-text span {
  color: var(--text-muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.pwa-banner-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.btn-pwa-install-banner {
  background: var(--primary);
  color: #0b1302;
  border: none;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-pwa-install-banner:hover {
  background: var(--primary-hover);
  box-shadow: 0 0 10px var(--primary-glow);
}

.btn-pwa-dismiss-banner {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}

.btn-pwa-dismiss-banner:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

/* 4. PWA Installation Instructions Modal */
.pwa-card-guide {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 12px;
}

.pwa-guide-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.pwa-guide-badge {
  font-size: 0.76rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
}

.pwa-steps-list {
  padding-left: 20px;
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-main);
  line-height: 1.5;
}

.pwa-steps-list li {
  margin-bottom: 4px;
}

.pwa-steps-list li strong {
  color: #fff;
}

/* 5. Mobile-First Optimization & Touch Targets (WCAG 44x44px min) */
@media (max-width: 768px) {
  body {
    padding: 0 !important;
    background: var(--bg-main) !important;
  }

  .device-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }

  .desktop-top-nav {
    display: none !important;
  }

  .bottom-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: auto !important;
    min-height: 64px !important;
    padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
    z-index: 99 !important;
  }

  .nav-item {
    min-width: 48px !important;
    min-height: 48px !important;
    touch-action: manipulation !important;
  }

  /* Prevent auto zoom on iOS input focus */
  input, select, textarea {
    font-size: 16px !important;
    touch-action: manipulation;
  }
}

/* 6. Desktop Fluid Experience (PC / Laptop / Wide Screens) */
@media (min-width: 769px) {
  .device-wrapper:not(.device-frame-active) {
    max-width: 1280px !important;
    width: 95vw !important;
    height: 95vh !important;
    border-radius: 16px !important;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.85), 0 0 30px rgba(118, 186, 27, 0.12) !important;
  }

  .device-wrapper:not(.device-frame-active) .desktop-top-nav {
    display: flex !important;
    align-items: center;
    gap: 6px;
    margin: 0 16px;
    flex: 1;
    overflow-x: auto;
  }

  .device-wrapper:not(.device-frame-active) .bottom-nav {
    display: none !important;
  }

  .device-wrapper:not(.device-frame-active) .app-body {
    padding-bottom: 24px !important;
  }

  /* Grid layout enhancement on desktop */
  .device-wrapper:not(.device-frame-active) .students-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  }

  .device-wrapper:not(.device-frame-active) .dashboard-kpi-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}