/* Main Screens Styles - Home, Cycle, Sport, Adhkar, Habits */

/* --- HOME DASHBOARD (Image 4 Reference) --- */
.home-screen {
  padding: 24px 20px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

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

.user-welcome-text .greeting {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}

.user-welcome-text .name {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.4px;
}

.user-header-badges {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-main);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.header-icon-btn:hover {
  background-color: var(--primary-soft);
  color: var(--primary);
  border-color: var(--primary-soft-border);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(248, 73, 113, 0.15);
}

.header-icon-btn:active {
  transform: translateY(1px);
}

/* Header Language Switcher Wrapper & Luxury Dropdown Menu */
.header-lang-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

#home-btn-lang {
  position: relative;
  overflow: visible;
}

.lang-mini-badge {
  position: absolute;
  bottom: -3px;
  right: -3px;
  font-size: 8px;
  font-weight: 800;
  background: var(--primary-gradient);
  color: #FFFFFF;
  padding: 1px 4.5px;
  border-radius: 6px;
  letter-spacing: 0.3px;
  line-height: 1.1;
  box-shadow: 0 2px 4px rgba(248, 73, 113, 0.35);
  pointer-events: none;
  font-family: var(--font-primary);
}

.is-rtl .lang-mini-badge {
  right: auto;
  left: -3px;
}

.lang-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 175px;
  background: var(--bg-surface);
  border-radius: 18px;
  border: 1px solid var(--border-subtle);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12), 0 3px 8px rgba(0, 0, 0, 0.04);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  z-index: 1000;
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  pointer-events: none;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.is-rtl .lang-dropdown-menu {
  right: auto;
  left: 0;
}

.lang-dropdown-menu.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.lang-dropdown-header {
  padding: 6px 10px 4px 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 3px;
}

.lang-options-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.lang-dropdown-menu .lang-pill-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 12px;
  border: none;
  background: transparent;
  color: var(--text-main);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: left;
}

.is-rtl .lang-dropdown-menu .lang-pill-btn {
  text-align: right;
}

.lang-dropdown-menu .lang-pill-btn:hover {
  background: var(--bg-subtle);
  color: var(--primary);
  transform: translateX(2px);
}

.is-rtl .lang-dropdown-menu .lang-pill-btn:hover {
  transform: translateX(-2px);
}

.lang-dropdown-menu .lang-pill-btn.active {
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 700;
}

.lang-pill-flag {
  font-size: 15px;
  display: inline-flex;
}

.lang-pill-name {
  flex: 1;
}

.lang-pill-check {
  font-size: 12px;
  color: var(--primary);
  font-weight: 800;
}

/* Lunari Circular Cycle Dial Widget (Image 4) */
.cycle-dial-card {
  background-color: var(--bg-surface);
  border-radius: 28px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-subtle);
  position: relative;
}

.cycle-dial-container {
  width: 220px;
  height: 220px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0 16px 0;
}

.cycle-dial-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.cycle-dial-svg .track {
  stroke: var(--bg-subtle);
  stroke-width: 14;
  fill: none;
}

.cycle-dial-svg .progress {
  stroke: var(--primary);
  stroke-width: 14;
  stroke-linecap: round;
  fill: none;
  transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.cycle-dial-center {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 2;
}

.cycle-droplet-badge {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: var(--primary-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  color: var(--primary);
}

.cycle-droplet-badge svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.cycle-day-number {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.1;
}

.cycle-sub-status {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
  margin-top: 2px;
}

.conception-badge {
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
}

.conception-badge.high {
  background-color: var(--status-fertile-soft);
  color: var(--status-fertile);
}

.conception-badge.medium {
  background-color: #FEF3C7;
  color: #D97706;
}

.conception-badge.low {
  background-color: var(--bg-subtle);
  color: var(--text-secondary);
}

.dial-action-btn {
  margin-top: 12px;
  width: auto;
  min-height: 42px;
  padding: 10px 24px;
  font-size: 13.5px;
}

/* Phase Strip Carousel (Image 4) */
.phase-section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 12px;
}

.phase-cards-carousel,
.phases-carousel {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  touch-action: pan-x pan-y;
  &::-webkit-scrollbar {
    display: none;
  }
}

.phase-cards-carousel::-webkit-scrollbar,
.phases-carousel::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.phase-card {
  min-width: 260px;
  max-width: 260px;
  background-color: var(--bg-surface);
  border-radius: var(--radius-lg);
  padding: 18px;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.phase-card.active {
  border-color: var(--primary);
  box-shadow: 0 6px 20px rgba(248, 73, 113, 0.12);
}

.phase-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.phase-card-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
}

.phase-card-days {
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
}

.phase-card-art {
  height: 90px;
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.phase-card-art svg {
  width: 100%;
  height: 100%;
}

.phase-card-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* Quick Glance Daily Trio Cards */
.daily-trio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.trio-card {
  background-color: var(--bg-surface);
  border-radius: var(--radius-md);
  padding: 14px 10px;
  border: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

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

.trio-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.trio-icon svg {
  width: 16px;
  height: 16px;
}

.trio-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
}

.trio-label {
  font-size: 10.5px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* --- CALENDAR & ADD LOG (Image 5 Reference) --- */
.calendar-screen {
  padding: 16px 20px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.cycle-stats-banner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.cycle-stat-box {
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  padding: 14px;
  border: 1px solid var(--border-subtle);
}

.cycle-stat-box .title {
  font-size: 12px;
  color: var(--text-secondary);
}

.cycle-stat-box .val {
  font-size: 20px;
  font-weight: 800;
  color: var(--primary);
  margin-top: 4px;
}

/* Calendar Color Guide / Legend */
.calendar-legend-card {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.legend-header {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

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

.legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: var(--bg-subtle);
  padding: 8px 10px;
  border-radius: var(--radius-md);
}

.legend-badge {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 800;
}

.legend-badge.period-badge {
  background-color: var(--primary-soft);
  color: var(--primary);
  border: 1.5px solid var(--primary);
}

.legend-badge.fertile-badge {
  background-color: #F5F3FF;
  color: #8B5CF6;
  border: 1.5px solid #8B5CF6;
}

.legend-badge.ovulation-badge {
  background-color: #8B5CF6;
  color: #FFFFFF;
}

.legend-badge.today-badge {
  background-color: #FFFFFF;
  color: var(--primary);
  border: 2px solid var(--primary);
}

.legend-info {
  display: flex;
  flex-direction: column;
}

.legend-title {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.2;
}

.legend-sub {
  font-size: 10px;
  color: var(--text-secondary);
}

/* Day Cell interactive states & log indicator dot */
.cal-day-cell {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--text-body);
}

.cal-day-cell:hover {
  transform: scale(1.08);
}

.cal-day-cell.selected-day {
  box-shadow: 0 0 0 2.5px var(--primary) !important;
  font-weight: 800 !important;
  transform: scale(1.12);
  z-index: 5;
}

.cal-day-cell.has-log-dot::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--primary);
}

/* Selected Date Inspection Card */
.selected-day-details-card {
  background-color: var(--bg-surface);
  border-radius: var(--radius-lg);
  padding: 18px;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.selected-day-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.selected-day-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-main);
}

/* Cycle Logs History */
.history-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  font-weight: 800;
  color: var(--text-main);
  margin-top: 6px;
}

.history-logs-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.history-item-card {
  background-color: var(--bg-surface);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  border: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.2s ease;
}

.history-item-card:hover {
  border-color: var(--primary-soft-border);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.history-item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.history-item-date {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-main);
}

.history-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.history-symptom-tag {
  background-color: var(--bg-subtle);
  color: var(--text-body);
  padding: 3px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
}

/* Add Log Drawer (Image 5) */
.log-drawer-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.log-section-header {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 10px;
}

/* 4-Droplet Flow Intensity Picker */
.flow-droplets-row {
  display: flex;
  justify-content: space-around;
  gap: 8px;
}

.flow-option-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 6px;
  background-color: var(--bg-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all 0.2s ease;
}

.flow-option-card.selected {
  background-color: var(--primary-soft);
  border-color: var(--primary);
}

.flow-icon-group {
  display: flex;
  gap: 2px;
  margin-bottom: 6px;
}

.flow-option-card svg {
  width: 16px;
  height: 16px;
  fill: #CBD5E1;
}

.flow-option-card.selected svg {
  fill: var(--primary);
}

.flow-option-card .label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-body);
}

/* 12 Illustrated Symptoms Grid */
.symptoms-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.symptom-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 10px 4px;
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}

.symptom-item.selected {
  background: var(--primary-soft);
  border-color: var(--primary);
}

.symptom-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  font-size: 18px;
}

.symptom-item.selected .symptom-icon-wrap {
  background: var(--primary);
  color: #FFFFFF;
}

.symptom-item .name {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-body);
  line-height: 1.2;
}

/* Moods Grid */
.moods-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

.mood-chip {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mood-chip.selected {
  background: var(--primary-soft);
  border-color: var(--primary);
  transform: scale(1.1);
}

/* --- SPORT & 3D WORKOUT (wger + Kinematics + Voice Coach) --- */
.workout-screen {
  padding: 16px 20px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

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

/* Category Filter Pills (All, Glutes, Abs, Legs, Full Body, Arms, Flexibility, Pelvic) */
.category-filter-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 6px 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.category-filter-strip::-webkit-scrollbar {
  display: none;
}

.category-pill {
  flex-shrink: 0;
  padding: 7px 14px;
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.category-pill:hover {
  border-color: var(--primary-soft-border);
  color: var(--primary);
}

.category-pill.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(248, 73, 113, 0.28);
}

/* Exercise Sub-Chips Strip */
.exercise-sub-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 4px 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.exercise-sub-strip::-webkit-scrollbar {
  display: none;
}

.exercise-sub-chip {
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  color: var(--text-body);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.exercise-sub-chip:hover {
  background: var(--primary-soft);
  color: var(--primary);
}

.exercise-sub-chip.active {
  background: var(--primary-soft);
  border-color: var(--primary-soft-border);
  color: var(--primary);
  font-weight: 700;
}

/* 2D Biomechanical Kinematics Container */
.workout-2d-canvas-card {
  width: 100%;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-subtle);
  background: #FFF5F7;
  position: relative;
  min-height: 280px;
}

/* Current Exercise Quick Action Card (2-Tier Luxury Layout, Zero Overlap) */
.workout-quick-card {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-subtle);
  margin-top: 6px;
}

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

.workout-quick-title-wrap {
  flex: 1;
  min-width: 0;
}

.workout-quick-eyebrow {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.workout-quick-name {
  margin: 0;
  font-size: 16.5px;
  font-weight: 800;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.3px;
  line-height: 1.3;
}

.workout-quick-steppers-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.quick-icon-stepper-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: var(--radius-full) !important;
  border: 1.5px solid var(--border-subtle) !important;
  background: var(--bg-surface) !important;
  color: var(--text-main) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  padding: 0 !important;
  flex-shrink: 0;
}

.quick-icon-stepper-btn:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  background: var(--primary-soft) !important;
  transform: scale(1.08) !important;
}

.quick-icon-stepper-btn:active {
  transform: scale(0.92) !important;
}

.quick-stepper-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-subtle);
  padding: 4px 8px;
  border-radius: var(--radius-full);
  user-select: none;
  white-space: nowrap;
}

.workout-start-guided-btn {
  width: 100% !important;
  min-height: 48px !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  border-radius: var(--radius-full) !important;
  box-shadow: 0 4px 16px rgba(248, 73, 113, 0.28) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer;
}

/* Circular Timer for Active Guided Workout Player */
.player-circular-timer-wrapper {
  width: 160px;
  height: 160px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0 14px 0;
}

.player-timer-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.player-timer-track {
  stroke: var(--bg-subtle);
  stroke-width: 10;
  fill: none;
}

.player-timer-progress {
  stroke: var(--primary);
  stroke-width: 10;
  stroke-linecap: round;
  fill: none;
  transition: stroke-dashoffset 0.9s linear;
}

.player-timer-center {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.player-timer-number {
  font-size: 38px;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1;
}

.player-timer-unit {
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 2px;
}

/* Live Movement & Breathing Cue Box */
.player-cue-box {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: var(--shadow-card);
}

.player-cue-header {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.player-cue-movement {
  font-size: 13.5px;
  color: var(--text-main);
  font-weight: 600;
  line-height: 1.4;
}

.player-cue-breathing {
  font-size: 12.5px;
  color: #0369A1;
  background: var(--status-follicular-soft);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  margin-top: 4px;
}

/* Rest Screen View */
.player-rest-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  padding: 10px 0;
}

.rest-droplet-badge {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #E0F2FE;
  color: #0284C7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  margin-bottom: 12px;
  box-shadow: 0 4px 16px rgba(14, 165, 233, 0.2);
  animation: gentlePulse 2s ease-in-out infinite;
}

@keyframes gentlePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.rest-timer-display {
  font-size: 48px;
  font-weight: 800;
  color: var(--primary);
  margin: 10px 0;
  line-height: 1;
}

.rest-next-box {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 10px 16px;
  width: 100%;
  max-width: 320px;
  margin-bottom: 16px;
}

/* 11-Field Detailed Exercise Info Card */
.exercise-details-sheet {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  padding: 20px;
  border: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.exercise-heading-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.exercise-name-big {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-main);
}

.exercise-target-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.muscle-pill-primary {
  background: var(--primary-soft);
  color: var(--primary);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
}

.muscle-pill-secondary {
  background: var(--bg-subtle);
  color: var(--text-secondary);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
}

.exercise-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.field-numbered-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 18px;
  font-size: 13.5px;
  color: var(--text-body);
}

.breathing-box {
  background: var(--status-follicular-soft);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 13px;
  color: #0369A1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.safety-tip-box {
  background: var(--primary-soft);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 13px;
  color: var(--primary-deep);
  display: flex;
  align-items: center;
  gap: 10px;
}

.safety-tip-box svg,
.breathing-box svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.mistakes-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mistakes-list li {
  font-size: 13px;
  color: #DC2626;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mistakes-list li::before {
  content: "✕";
  font-weight: 800;
}

/* "My Week" 7-Day Plan Strip (Fix ugly scrollbar line) */
.my-week-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  touch-action: pan-x pan-y;
  &::-webkit-scrollbar {
    display: none;
  }
}

.my-week-strip::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.week-day-pill {
  flex: 1;
  min-width: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 4px;
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: all 0.2s ease;
}

.week-day-pill.active {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.week-day-pill .dname {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}

.week-day-pill .wtitle {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-main);
  margin-top: 4px;
}

/* Post-Workout Feedback Dialog (😫 Hard, 🙂 Good, 😍 Easy) */
.feedback-options-row {
  display: flex;
  justify-content: space-around;
  gap: 12px;
  margin: 20px 0;
}

.feedback-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 8px;
  background: var(--bg-subtle);
  border-radius: var(--radius-lg);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}

.feedback-btn:hover {
  transform: translateY(-2px);
}

.feedback-btn.selected {
  background: var(--primary-soft);
  border-color: var(--primary);
}

.feedback-emoji {
  font-size: 32px;
  margin-bottom: 8px;
}

.feedback-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
}

/* =========================================================================
   LUXURY DARK "LIST OF EXERCISE" SYSTEM (Matching media_1792182825747_12e18fa6.png)
   ========================================================================= */
/* =========================================================================
   CLEAN WHITE LUXURY WORKOUT SYSTEM (Matching media_1792186088058_e5df38ad.png)
   ========================================================================= */
.workout-list-container {
  background: #FFFFFF;
  border-radius: 24px;
  padding: 18px 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  border: 1px solid #EEF0F4;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.workout-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid #F1F5F9;
}

.workout-list-title {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.3px;
}

.workout-list-subtitle {
  font-size: 12.5px;
  font-weight: 500;
  color: #6B7280;
  margin-top: 2px;
}

.workout-start-guided-btn {
  padding: 9px 18px;
  border-radius: 24px;
  background: #111827;
  color: #FFFFFF;
  border: none;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 14px rgba(17, 24, 39, 0.25);
  transition: all 0.2s ease;
}

.workout-start-guided-btn:hover {
  background: #1F2937;
  transform: translateY(-1px);
}

.workout-cards-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.exercise-item-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #FFFFFF;
  border-radius: 20px;
  padding: 12px 14px;
  border: 1px solid #F1F5F9;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.exercise-item-card:hover {
  background: #FAFAFB;
  border-color: #E2E8F0;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

.exercise-item-card:active {
  transform: scale(0.99);
}

.exercise-thumb-slot {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.exercise-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: start;
}

.exercise-item-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.2px;
  line-height: 1.3;
}

.exercise-item-reps {
  font-size: 12.5px;
  font-weight: 500;
  color: #6B7280;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Minimalist Clean Progress Track matching reference photo */
.exercise-progress-track {
  width: 100%;
  max-width: 160px;
  height: 6px;
  background: #E5E7EB;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 4px;
}

.exercise-progress-fill {
  height: 100%;
  background: #111827;
  border-radius: 3px;
}

.btn-card-play {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #F3F4F6;
  color: #111827;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  font-weight: 800;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.btn-card-play:hover {
  background: #111827;
  color: #FFFFFF;
}

.btn-card-info {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #9CA3AF;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-card-info:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.16);
}

/* Gym Library Explorer Card */
.gym-explore-card {
  background: linear-gradient(135deg, #1E1B4B 0%, #2E1065 100%);
  border-radius: 20px;
  padding: 16px 18px;
  border: 1px solid rgba(167, 139, 250, 0.3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(46, 16, 101, 0.3);
  transition: all 0.2s ease;
}

.gym-explore-card:hover {
  transform: translateY(-2px);
  border-color: #A78BFA;
}

/* --- ADHKAR & PRAYER TIMES (Adhan.js + Hisn al-Muslim) --- */
.adhkar-screen {
  padding: 16px 20px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.prayer-hero-card {
  background: linear-gradient(135deg, #1E1B4B 0%, #312E81 100%);
  border-radius: 28px;
  padding: 22px;
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 10px 30px rgba(30, 27, 75, 0.25);
}

.prayer-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.prayer-next-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #A5B4FC;
}

.prayer-countdown-clock {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.prayer-times-horizontal {
  display: flex;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.prayer-time-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.prayer-time-item.current {
  color: #38BDF8;
  font-weight: 700;
}

.prayer-time-name {
  font-size: 11px;
  opacity: 0.8;
}

.prayer-time-val {
  font-size: 12px;
  font-weight: 600;
}

/* Interactive Digital Tasbeeh */
.tasbeeh-card {
  background: var(--bg-surface);
  border-radius: 28px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-subtle);
}

.tasbeeh-tap-button {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: var(--primary-gradient);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  box-shadow: var(--primary-glow);
  cursor: pointer;
  border: 4px solid #FFFFFF;
  outline: 4px solid var(--primary-soft-border);
  transition: transform 0.1s ease;
  user-select: none;
  margin: 16px 0;
}

.tasbeeh-tap-button:active {
  transform: scale(0.92);
}

.tasbeeh-count {
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
}

.tasbeeh-subtext {
  font-size: 11px;
  opacity: 0.85;
  margin-top: 4px;
}

/* Adhkar Cards with Tashkeel */
.adhkar-card {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  padding: 18px;
  border: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.adhkar-arabic {
  font-family: var(--font-arabic);
  font-size: 18px;
  line-height: 2;
  text-align: right;
  direction: rtl;
  color: var(--text-main);
}

.adhkar-translation {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.adhkar-counter-pill {
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
}

/* --- HABITS & PLANNER (Loop Habit Tracker Engine) --- */
.habits-screen {
  padding: 16px 20px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.habit-streak-card {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  border: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: var(--shadow-card);
}

.habit-info-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.habit-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
}

.habit-score-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--status-success);
}

.habit-check-button {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  border: 2px solid var(--border-subtle);
  background: var(--bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.habit-check-button.done {
  background: var(--primary-gradient);
  border-color: var(--primary);
  color: #FFFFFF;
  box-shadow: var(--primary-glow-sm);
}

/* Hydration Glass Counter & 8 Interactive Cups */
.water-tracker-card {
  background: linear-gradient(135deg, #EFF6FF 0%, #E0F2FE 50%, #BAE6FD 100%);
  border-radius: var(--radius-xl);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: 1px solid rgba(186, 230, 253, 0.6);
  box-shadow: 0 4px 18px rgba(2, 132, 199, 0.08);
}

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

.water-text-info .title {
  font-size: 14.5px;
  font-weight: 800;
  color: #0369A1;
  display: flex;
  align-items: center;
  gap: 6px;
}

.water-text-info .amount {
  font-size: 22px;
  font-weight: 800;
  color: #0C4A6E;
  margin-top: 2px;
}

.water-cups-row {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  padding: 4px 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  touch-action: pan-x pan-y;
  &::-webkit-scrollbar {
    display: none;
  }
}

.water-cups-row::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.water-cup-btn {
  aspect-ratio: 0.85;
  background: rgba(255, 255, 255, 0.7);
  border: 1.5px solid rgba(14, 165, 233, 0.3);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  padding: 4px;
  position: relative;
  overflow: hidden;
}

.water-cup-btn:hover {
  transform: translateY(-2px);
  border-color: #0284C7;
}

.water-cup-btn.filled {
  background: linear-gradient(180deg, #38BDF8 0%, #0284C7 100%);
  border-color: #0369A1;
  box-shadow: 0 4px 10px rgba(2, 132, 199, 0.35);
  transform: scale(1.05);
}

@keyframes cupRipple {
  0% { transform: scale(0.92); box-shadow: 0 0 0 0 rgba(2, 132, 199, 0.8); }
  50% { transform: scale(1.18); box-shadow: 0 0 0 10px rgba(2, 132, 199, 0); }
  100% { transform: scale(1.05); box-shadow: 0 4px 10px rgba(2, 132, 199, 0.35); }
}

.water-cup-btn.cup-ripple {
  animation: cupRipple 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes popScale {
  0% { transform: scale(0.85); }
  60% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

.pop-animation {
  display: inline-block;
  animation: popScale 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.water-cup-btn svg {
  width: 18px;
  height: 18px;
  stroke: #0284C7;
  transition: all 0.2s ease;
}

.water-cup-btn.filled svg {
  stroke: #FFFFFF;
  fill: rgba(255, 255, 255, 0.4);
}

.water-cup-number {
  font-size: 9px;
  font-weight: 700;
  color: #0284C7;
  margin-top: 2px;
}

.water-cup-btn.filled .water-cup-number {
  color: #FFFFFF;
}

.water-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.water-progress-bar-wrap {
  flex: 1;
  height: 7px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.water-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #38BDF8, #0284C7);
  border-radius: var(--radius-full);
  transition: width 0.35s ease;
}

.water-btn-mini {
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
}

.water-btn-add {
  background: #0284C7;
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3);
}

.water-btn-reset {
  background: rgba(255, 255, 255, 0.7);
  color: #0369A1;
  border: 1px solid rgba(14, 165, 233, 0.25);
}

/* Enhanced Habit Card */
.habit-card-enhanced {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  border: 1.5px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-card);
  transition: all 0.2s ease;
}

.habit-card-enhanced:hover {
  border-color: var(--primary-soft-border);
}

.habit-category-avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--primary-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.habit-info-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.habit-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.habit-title-text {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.35;
  word-break: break-word;
}

.habit-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--text-muted);
}

.habit-health-bar {
  width: 100%;
  max-width: 110px;
  height: 5px;
  background: var(--bg-subtle);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-top: 2px;
}

.habit-health-fill {
  height: 100%;
  background: linear-gradient(90deg, #10B981, #059669);
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}

.habit-action-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.habit-btn-delete {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.habit-btn-delete:hover {
  color: #EF4444;
  background: #FEE2E2;
}

.habit-check-button {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-full);
  border: 2px solid var(--border-subtle);
  background: var(--bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  color: transparent;
  flex-shrink: 0;
}

.habit-check-button:hover {
  transform: scale(1.05);
  border-color: var(--primary);
}

.habit-check-button.done {
  background: var(--primary-gradient);
  border-color: var(--primary);
  color: #FFFFFF;
  box-shadow: var(--primary-glow-sm);
  transform: scale(1.08);
}

/* Bouncy micro-animation when toggling habit */
@keyframes bouncyCheck {
  0% { transform: scale(1); }
  35% { transform: scale(1.35) rotate(-6deg); }
  65% { transform: scale(0.88) rotate(3deg); }
  85% { transform: scale(1.14); }
  100% { transform: scale(1.08); }
}

.habit-check-button.bouncing {
  animation: bouncyCheck 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.habit-card-enhanced.completed {
  opacity: 0.85;
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(16, 185, 129, 0.3);
}

.habit-card-enhanced.completed .habit-title-text {
  text-decoration: line-through;
  color: var(--text-muted);
}

/* Luxury Habits Filter Tabs */
.habits-filter-tabs {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-surface);
  padding: 4px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border-subtle);
  margin: 12px 0 16px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  box-sizing: border-box;
}

.habits-filter-tabs::-webkit-scrollbar {
  display: none;
}

.habit-filter-pill {
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 700;
  border: none;
  background: transparent;
  border-radius: var(--radius-full);
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.habit-filter-pill:hover {
  color: var(--primary);
  background: var(--primary-soft);
}

.habit-filter-pill.active {
  background: var(--primary-gradient);
  color: #FFFFFF;
  box-shadow: 0 3px 8px rgba(225, 29, 72, 0.28);
}

.habit-filter-count {
  font-size: 9.5px;
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 5px;
  border-radius: var(--radius-full);
  font-weight: 800;
  line-height: 1.2;
}

.habit-filter-pill.active .habit-filter-count {
  background: rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
}

.habits-completion-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  background: var(--primary-soft);
  color: var(--primary);
  border: 1px solid var(--primary-soft-border);
  letter-spacing: 0.2px;
}

/* Time Estimate Pill */
.habit-time-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 700;
  color: #4F46E5;
  background: #EEF2FF;
  padding: 2px 7px;
  border-radius: 6px;
  white-space: nowrap;
}

.habit-time-badge svg {
  width: 12px;
  height: 12px;
}

.habit-tod-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  font-weight: 600;
  color: #B45309;
  background: #FEF3C7;
  padding: 2px 6px;
  border-radius: 6px;
  white-space: nowrap;
}

/* Category Avatars Soft Tints */
.habit-category-avatar.cat-mindfulness {
  background: #FCE7F3;
  color: #BE185D;
}
.habit-category-avatar.cat-fitness {
  background: #FFEDD5;
  color: #C2410C;
}
.habit-category-avatar.cat-health {
  background: #E0F2FE;
  color: #0369A1;
}
.habit-category-avatar.cat-learning {
  background: #EDE9FE;
  color: #6D28D9;
}
.habit-category-avatar.cat-nutrition {
  background: #DCFCE7;
  color: #15803D;
}
.habit-category-avatar.cat-sleep {
  background: #F3E8FF;
  color: #7E22CE;
}

/* Habit Category Selector Chips */
.habit-chips-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 2px 8px 2px;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  touch-action: pan-x pan-y;
  &::-webkit-scrollbar {
    display: none;
  }
}

.habit-chips-row::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.habit-chip {
  padding: 8px 14px;
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  border: 1.5px solid transparent;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-body);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  flex-shrink: 0;
  white-space: nowrap;
}

.habit-chip:hover {
  border-color: var(--border-subtle);
}

.habit-chip.selected {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 700;
}

/* ==========================================================================
   Smooth Scrolling, Touch Momentum & Zero Scrollbar Guarantee
   ========================================================================== */
.my-week-strip,
.phases-carousel,
.phase-cards-carousel,
.habit-chips-row,
.water-cups-row {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  &::-webkit-scrollbar {
    display: none;
  }
}

.my-week-strip::-webkit-scrollbar,
.phases-carousel::-webkit-scrollbar,
.phase-cards-carousel::-webkit-scrollbar,
.habit-chips-row::-webkit-scrollbar,
.water-cups-row::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* ==========================================================================
   RTL Screen Adjustments (.is-rtl)
   ========================================================================== */

/* --- Home Screen RTL --- */
.is-rtl .home-screen {
  text-align: right;
}

.is-rtl .home-user-header {
  flex-direction: row;
}

.is-rtl .user-welcome-text {
  text-align: right;
}

.is-rtl .daily-trio-grid .trio-card {
  text-align: right;
}

.is-rtl .phase-section-title {
  flex-direction: row;
}

.is-rtl .phase-card {
  text-align: right;
}

.is-rtl .phase-card-top {
  flex-direction: row;
}

/* --- Cycle & Calendar Screen RTL --- */
.is-rtl .calendar-screen {
  text-align: right;
}

.is-rtl .cycle-stats-banner {
  flex-direction: row;
}

.is-rtl .cycle-stat-box {
  text-align: right;
}

.is-rtl .calendar-legend-card {
  text-align: right;
}

.is-rtl .legend-header {
  flex-direction: row;
}

.is-rtl .legend-item {
  flex-direction: row;
}

.is-rtl .legend-badge {
  margin-right: 0 !important;
  margin-left: 10px !important;
}

.is-rtl .legend-info {
  text-align: right;
}

.is-rtl .selected-day-details-card {
  text-align: right;
}

.is-rtl .selected-day-top {
  flex-direction: row;
}

.is-rtl .history-section-header {
  flex-direction: row;
}

.is-rtl .history-item-top {
  flex-direction: row;
}

.is-rtl .history-tags-row {
  flex-direction: row;
}

.is-rtl .history-symptom-tag {
  margin-right: 0;
  margin-left: 6px;
}

.is-rtl .flow-droplets-row {
  flex-direction: row;
}

.is-rtl .symptoms-grid {
  direction: rtl;
}

.is-rtl .log-section-header {
  text-align: right;
}

/* --- Habits Screen RTL --- */
.is-rtl .habits-screen {
  text-align: right;
}

.is-rtl .water-header-row {
  flex-direction: row;
}

.is-rtl .water-text-info {
  text-align: right;
}

.is-rtl .water-cups-row {
  flex-direction: row;
}

.is-rtl .water-actions-row {
  flex-direction: row;
}

.is-rtl .habit-card-enhanced {
  flex-direction: row;
}

.is-rtl .habit-info-col {
  text-align: right;
}

.is-rtl .habit-title-row {
  flex-direction: row;
}

.is-rtl .habit-meta-row {
  flex-direction: row;
}

.is-rtl .habit-action-buttons {
  flex-direction: row;
}

.is-rtl .sheet-header {
  flex-direction: row;
}

.is-rtl .habit-chips-row {
  flex-direction: row;
}

/* --- Adhkar & Prayer Screen RTL --- */
.is-rtl .adhkar-screen {
  text-align: right;
}

.is-rtl .prayer-hero-card {
  text-align: right;
}

.is-rtl .prayer-top-row {
  flex-direction: row;
}

.is-rtl .prayer-top-row > div:first-child {
  text-align: right;
}

.is-rtl .prayer-top-row > div:last-child {
  text-align: left;
}

.is-rtl .prayer-times-horizontal {
  flex-direction: row;
}

.is-rtl .adhkar-card {
  text-align: right;
}

.is-rtl .adhkar-translation {
  text-align: right;
}

/* --- Settings Screen RTL & Language Grid --- */
.settings-lang-switcher {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.settings-lang-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 6px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-subtle);
  background: var(--bg-surface);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-body);
}

.settings-lang-btn:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.settings-lang-btn.active {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(248, 73, 113, 0.15);
}

.settings-lang-btn .lang-flag {
  font-size: 20px;
}

.is-rtl .settings-screen {
  text-align: right;
}




/* Weekly History Date Strip for Habits */
.habits-history-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 14px 0;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.habits-history-strip::-webkit-scrollbar {
  display: none;
}

.history-day-card {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 64px;
  padding: 10px 8px;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
}

.history-day-card:hover {
  border-color: var(--primary-soft-border);
}

.history-day-card.active {
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: 0 4px 12px rgba(201, 24, 74, 0.15);
}

.history-day-card .day-name {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-secondary);
}

.history-day-card.active .day-name {
  color: var(--primary);
}

.history-day-card .day-num {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-main);
}

.history-day-card.active .day-num {
  color: var(--primary-deep);
}

.history-day-card .day-status-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  color: var(--text-body);
}

.history-day-card .day-status-pill.success {
  background: #ECFDF5;
  color: #059669;
}

/* Past Day History Banner */
.past-day-banner {
  background: var(--tri-banner-gradient);
  border: 1px solid var(--primary-soft-border);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.past-day-banner-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.past-day-banner-title {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--text-main);
}

.past-day-stats-row {
  display: flex;
  gap: 12px;
  font-size: 12.5px;
  color: var(--text-body);
  font-weight: 600;
}


/* Interactive Adhkar Repeat Counter Styles */
.adhkar-card.completed-dhikr {
  background: #F0FDF4;
  border-color: #BBF7D0;
  opacity: 0.88;
}

.adhkar-card-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.adhkar-repeat-target-badge {
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  color: var(--text-secondary);
}

.completed-dhikr .adhkar-repeat-target-badge {
  background: #DCFCE7;
  color: #15803D;
}

.btn-reset-single-dhikr {
  background: transparent;
  border: none;
  font-size: 14px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  transition: color 0.2s;
}

.btn-reset-single-dhikr:hover {
  color: var(--primary);
}

.btn-adhkar-tap {
  width: 100%;
  min-height: 44px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--primary-soft-border);
  background: var(--primary-soft);
  color: var(--primary);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
  user-select: none;
  -webkit-user-select: none;
}

.btn-adhkar-tap:active {
  transform: scale(0.98);
}

.btn-adhkar-tap.done {
  background: #10B981;
  color: #FFFFFF;
  border-color: #059669;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}


/* Stepper Setting Rows for Physiological Parameters */
.stepper-setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.stepper-label-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stepper-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
}

.stepper-sub {
  font-size: 11.5px;
  color: var(--text-muted);
}

.stepper-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-stepper {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-main);
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.btn-stepper:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}

.btn-stepper:active {
  transform: scale(0.92);
}

.stepper-val {
  min-width: 58px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--primary);
}

/* Adhkar Scrollable Categories Bar */
.adhkar-category-scroll-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 10px 2px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.adhkar-category-scroll-bar::-webkit-scrollbar {
  display: none;
}

.adhkar-cat-pill {
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.adhkar-cat-pill:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.adhkar-cat-pill.active {
  background: var(--primary);
  color: #FFFFFF;
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(201, 24, 74, 0.22);
}

.adhkar-progress-strip {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin-bottom: 4px;
}

.adhkar-fadl-note {
  font-size: 11.5px;
  color: #B45309;
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  margin: 6px 0 10px 0;
  line-height: 1.45;
}

/* ============================================================================
 * Partner Care Mode (وضع رفيق الدرب 💍) Styles
 * ============================================================================ */
.partner-pledge-banner {
  background: linear-gradient(135deg, #FFF1F2 0%, #FFE4E6 100%);
  border: 1px solid #FECDD3;
  border-radius: var(--radius-md);
  padding: 8px 12px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.partner-pledge-text {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #BE123C;
}

.partner-overview-card {
  background: var(--bg-surface);
  border: 1.5px solid #FBCFE8;
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 4px 16px rgba(244, 63, 94, 0.06);
}

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

.avatar-cherry {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-full);
  background: #FFF0F3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border: 1px solid #FCE7F3;
  flex-shrink: 0;
}

.partner-mood-badge {
  background: #FDF2F8;
  border: 1.5px solid #FBCFE8;
  border-radius: var(--radius-full);
  min-width: 44px;
  height: 44px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(244, 63, 94, 0.08);
}

.partner-chaima-notes {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 12.5px;
  color: #92400E;
  margin-bottom: 12px;
  font-style: italic;
}

.partner-metrics-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  background: var(--bg-subtle);
  padding: 10px;
  border-radius: var(--radius-md);
}

.partner-metric-item {
  text-align: center;
}

.partner-metric-item .val {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text-main);
}

.partner-metric-item .lbl {
  font-size: 10.5px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.partner-advice-card {
  background: linear-gradient(135deg, #FFF5F7 0%, #FFFFFF 100%);
  border-left: 4px solid var(--primary);
  border-right: 4px solid var(--primary);
  padding: 14px 16px;
  margin-bottom: 12px;
}

.partner-advice-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.partner-advice-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-body);
  margin: 0;
}

.partner-presence-card {
  padding: 12px 14px;
  margin-bottom: 14px;
}

/* Gestures Grid */
.partner-gestures-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.gesture-card {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  transition: all 0.2s ease;
}

.gesture-card:hover {
  border-color: #F43F5E;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(244, 63, 94, 0.08);
}

.gesture-icon-wrap {
  font-size: 24px;
}

.gesture-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-main);
}

.gesture-message-preview {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 44px;
}

.btn-send-gesture {
  width: 100%;
  min-height: 34px;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  transition: all 0.2s ease;
}

.btn-send-gesture.sending {
  opacity: 0.7;
}

.btn-send-gesture.sent {
  background: #10B981 !important;
  color: #FFFFFF !important;
  border-color: #059669 !important;
}

/* Chaima's Incoming Banner & Gestures */
.partner-dropby-strip {
  background: linear-gradient(90deg, #FFF1F2 0%, #FFFFFF 100%);
  border: 1px solid #FECDD3;
  border-radius: var(--radius-full);
  padding: 8px 14px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.partner-dropby-icon {
  font-size: 16px;
}

.partner-dropby-text {
  font-size: 12.5px;
  font-weight: 700;
  color: #BE123C;
}

.partner-dropby-time {
  font-size: 11px;
  font-weight: 800;
  color: #E11D48;
  background: #FFE4E6;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.partner-gesture-incoming-card {
  background: linear-gradient(135deg, #FFF0F3 0%, #FFFBEB 100%);
  border: 1.5px solid #FDA4AF;
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: 14px;
  box-shadow: 0 4px 20px rgba(225, 29, 72, 0.12);
  animation: popIn 0.35s ease;
}

.gesture-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.gesture-card-icon {
  font-size: 24px;
}

.btn-dismiss-gesture {
  background: transparent;
  border: none;
  font-size: 16px;
  color: #9CA3AF;
  cursor: pointer;
  padding: 2px 4px;
}

.btn-dismiss-gesture:hover {
  color: #DC2626;
}

.gesture-card-message {
  font-size: 13.5px;
  line-height: 1.55;
  color: #881337;
  font-weight: 600;
  margin: 8px 0 12px 0;
  font-style: italic;
}

.gesture-pledge-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.btn-mark-gesture-read {
  width: auto;
  min-height: 32px;
  padding: 4px 14px;
  font-size: 11.5px;
  font-weight: 700;
  background: #FFFFFF;
  color: #BE123C;
  border-color: #FECDD3;
}

.btn-mark-gesture-read:hover {
  background: #FFF1F2;
}

/* ==========================================================================
   Daily 5 Prayers & VIP Qiyam al-Layl Tracker
   ========================================================================== */
.prayer-tracker-card {
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  background: var(--bg-surface);
  margin-top: 14px;
}

.prayer-check-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

@media (max-width: 480px) {
  .prayer-check-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
  }
}

.prayer-check-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  background: var(--bg-subtle);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: center;
  user-select: none;
}

.prayer-check-item:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}

.prayer-check-item.done {
  background: #ECFDF5;
  border-color: #10B981;
}

.prayer-check-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.prayer-check-item .p-name {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--text-main);
}

.prayer-check-item.done .p-name {
  color: #065F46;
}

.prayer-check-item .p-check-box {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid #CBD5E1;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  color: transparent;
  transition: all 0.2s ease;
}

.prayer-check-item.done .p-check-box {
  background: #10B981;
  border-color: #10B981;
  color: #FFFFFF;
}

.prayer-check-item .p-time-badge {
  font-size: 9.5px;
  color: var(--text-secondary);
  margin-top: 4px;
  font-weight: 600;
}

.prayer-check-item.done .p-time-badge {
  color: #047857;
  font-weight: 700;
}

.prayer-check-item .p-partner-pill {
  font-size: 8.5px;
  padding: 2px 4px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.04);
  color: #64748B;
  margin-top: 5px;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prayer-check-item .p-partner-pill.partner-done {
  background: #FEF3C7;
  color: #92400E;
  border: 1px solid #FCD34D;
  font-weight: 700;
}

/* ⭐ VIP Qiyam al-Layl Card ⭐ */
.vip-qiyam-card {
  background: linear-gradient(135deg, #1E1B4B 0%, #312E81 50%, #4338CA 100%);
  border: 1.5px solid #F59E0B;
  box-shadow: 0 8px 24px rgba(67, 56, 202, 0.35);
  color: #FFFFFF;
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-top: 14px;
  position: relative;
  overflow: hidden;
}

.vip-qiyam-card::before {
  content: '✨';
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 28px;
  opacity: 0.15;
  pointer-events: none;
}

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

.vip-crown-badge {
  background: linear-gradient(90deg, #F59E0B, #D97706);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}

.vip-transparency-pill {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #FEF08A;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.btn-check-qiyam {
  background: linear-gradient(135deg, #F59E0B, #FBBF24);
  color: #78350F;
  font-weight: 800;
  font-size: 12px;
  border: none;
  border-radius: var(--radius-full);
  padding: 8px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
  white-space: nowrap;
}

.btn-check-qiyam:hover {
  transform: scale(1.04);
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.45);
}

.btn-check-qiyam.prayed {
  background: linear-gradient(135deg, #10B981, #059669);
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}

.vip-status-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
  background: rgba(0, 0, 0, 0.22);
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.vip-user-status .lbl {
  font-size: 11px;
  color: #E0E7FF;
  font-weight: 700;
  margin-bottom: 3px;
}

.vip-user-status .val {
  font-size: 12px;
  font-weight: 800;
  color: #FDE047;
}

.vip-user-status.prayed .val {
  color: #86EFAC;
}

.btn-vip-nudge {
  width: 100%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px dashed rgba(253, 224, 71, 0.5);
  color: #FEF08A;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-vip-nudge:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: #FDE047;
}

.vip-nudge-received-banner {
  background: rgba(245, 158, 11, 0.25);
  border: 1px solid #F59E0B;
  border-radius: var(--radius-md);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: popIn 0.35s ease;
}

.btn-vip-nudge-ack {
  background: #F59E0B;
  color: #78350F;
  border: none;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  cursor: pointer;
  white-space: nowrap;
}

.btn-vip-nudge-ack:hover {
  background: #FBBF24;
}

/* ==========================================================================
   Partner Care Mode: Chaima's Full Daily Report (تقرير إنجاز شيماء)
   ========================================================================== */
.partner-report-card {
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  background: var(--bg-surface);
  margin-top: 12px;
}

.partner-tasks-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.partner-task-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}

.partner-task-item.done {
  background: #ECFDF5;
  border-color: #A7F3D0;
}

.task-status-icon {
  font-size: 14px;
  flex-shrink: 0;
}

.task-category-pill {
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-secondary);
}

.partner-report-subgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.partner-subcard {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
}

/* ==========================================================================
   Partner Cycle Calendar (تقويم دورة شيماء للشريك)
   ========================================================================== */
.partner-calendar-card {
  background: var(--bg-surface);
  border: 1.5px solid #FBCFE8;
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 4px 16px rgba(244, 63, 94, 0.06);
}

.p-calendar-month-wrap {
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  padding: 12px 8px 8px 8px;
  border: 1px solid var(--border-subtle);
}

.p-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.p-cal-days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.p-cal-cell {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-main);
  position: relative;
  transition: all 0.2s ease;
}

.p-cal-cell.empty {
  pointer-events: none;
}

.p-cal-cell.today {
  border: 1.5px solid var(--text-main);
  background: rgba(0, 0, 0, 0.03);
  font-weight: 800;
}

.p-cal-cell.period-day {
  background: #FFE4E6;
  color: #BE123C;
  font-weight: 800;
  border-radius: var(--radius-sm);
}

.p-cal-cell.fertile-day {
  background: #F3E8FF;
  color: #7E22CE;
  font-weight: 700;
  border-radius: var(--radius-sm);
}

.p-day-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  position: absolute;
  bottom: 2px;
}

.p-day-dot.period {
  background: #E11D48;
}

.p-day-dot.fertile {
  background: #9333EA;
}