* {
  box-sizing: border-box;
}

:root {
  --bg: #121316;
  --surface: #1b1d22;
  --surface-2: #24272e;
  --border: #2e323b;
  --border-strong: #3c4049;
  --text: #edeef0;
  --text-muted: #8b8f98;
  --text-suggested: #5c606a;
  --primary: #c9a15a;
  --primary-text: #17130b;
  --danger: #c1665a;
  --success: #6fa287;
  --warning: #c0863c;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --radius: 14px;
  --radius-sm: 9px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --header-h: 52px;
  --nav-h: 60px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, p {
  margin: 0;
}

/* Auth screen */

body.auth-gate .app-header,
body.auth-gate .bottom-nav {
  display: none;
}

body.auth-gate #view-root {
  min-height: 100vh;
  padding: var(--space-4);
  display: flex;
}

.auth-screen {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-card {
  width: 100%;
  max-width: 320px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-5);
  text-align: center;
}

.auth-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: var(--space-4);
}

.auth-loading {
  color: var(--text-muted);
}

.auth-card input[type="email"],
.auth-card input[type="password"] {
  margin-bottom: var(--space-3);
  text-align: center;
}

.auth-error {
  color: var(--danger);
  font-size: 13px;
  margin-top: var(--space-3);
}

.auth-hint {
  color: var(--success);
  font-size: 13px;
  margin-top: var(--space-3);
}

.auth-card .btn-ghost {
  font-size: 13px;
  margin-top: var(--space-2);
}

button {
  font-family: inherit;
}

/* Header */

.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  height: calc(var(--header-h) + var(--safe-top));
  padding-top: var(--safe-top);
  padding-left: var(--space-3);
  padding-right: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.app-title {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.app-title-accent {
  color: var(--primary);
}

/* Bildirim zili — index.html'in .app-header'ında ve coach.html'in roster
   ekranında monte ediliyor (js/components/notificationBell.js). Normal bir flex
   öğesi olarak tasarlandı (absolute DEĞİL) ki iki farklı header bağlamına da
   (space-between .app-header + spacer, veya .view-header'ın kendi sağ ucu) aynı
   şekilde otursun. */
.bell-btn {
  position: relative;
  flex-shrink: 0;
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: var(--space-2);
  line-height: 1;
}

.bell-btn svg {
  width: 20px;
  height: 20px;
  display: block;
}

.app-header-spacer {
  width: 36px;
  flex-shrink: 0;
}

/* Hoca "Kendi Antrenmanım"dan geçtiğinde, index.html'in her ekranında sabit
   duran geri dönüş şeridi (bireysel/öğrenci hesaplarında hep gizli). Header'ın
   kendisine hiç dokunmuyor — GYMBN başlığı ortalaması bozulmuyor. */
.coach-return-bar {
  position: sticky;
  top: calc(var(--header-h) + var(--safe-top));
  z-index: 9;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  color: var(--primary);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
}

.coach-return-bar .chev {
  font-size: 16px;
}

.view-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}

.bell-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
  border: 1.5px solid var(--surface);
}

.notif-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.notif-sheet-title {
  font-weight: 700;
  font-size: 15px;
}

.notif-mark-read {
  background: none;
  border: none;
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: var(--space-1);
}

.notif-item {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
  position: relative;
}

.notif-item:last-child {
  border-bottom: none;
}

.notif-item.unread {
  cursor: pointer;
}

.notif-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background: var(--surface-2);
}

.notif-body {
  flex: 1;
  min-width: 0;
}

.notif-text {
  font-size: 13.5px;
  line-height: 1.4;
  white-space: pre-line;
}

.notif-time {
  font-size: 11px;
  color: var(--text-suggested);
  margin-top: 3px;
  font-family: var(--font-mono);
}

.notif-unread-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
  margin-top: 5px;
}

/* View root */

#view-root {
  min-height: calc(100vh - var(--header-h) - var(--nav-h) - var(--safe-top) - var(--safe-bottom));
  padding: var(--space-4) var(--space-4) calc(var(--space-5) + var(--nav-h) + var(--safe-bottom));
}

/* Bottom nav */

.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  height: calc(var(--nav-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-decoration: none;
  color: var(--text-muted);
  font-size: 11px;
}

.nav-icon {
  line-height: 1;
  display: inline-flex;
}

.nav-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

.nav-item.active {
  color: var(--primary);
}

/* View header */

.view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.view-title {
  font-size: 20px;
  font-weight: 700;
}

.view-subtitle {
  color: var(--text-muted);
  font-size: 13px;
  margin-top: 2px;
}

.back-link {
  appearance: none;
  background: transparent;
  border: none;
  font-family: inherit;
  cursor: pointer;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 22px;
  padding: var(--space-1) var(--space-2);
  margin-left: calc(var(--space-2) * -1);
}

/* Buttons */

.btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.btn:active {
  opacity: 0.8;
}

.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-text);
}

.btn-danger {
  background: transparent;
  border-color: var(--danger);
  color: var(--danger);
}

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--primary);
  padding: 10px 8px;
}

.btn-block {
  display: block;
  width: 100%;
  text-align: center;
}

.btn-icon {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 18px;
  padding: 6px;
  cursor: pointer;
  line-height: 1;
}

.btn-icon.danger {
  color: var(--danger);
}

/* ICON_TRASH (util.js) tek SVG içerikli .btn-icon — diğerleri hep düz karakter
   (×, ⧉, ✎, ‹, ›), font-size'dan boyutlanıyor. SVG'nin kendi width/height'ı yok,
   viewBox tek başına flex içinde boyut vermiyor — 0×0 render oluyordu (roster
   davet iptali, gün/egzersiz silme, iki ödeme ekranı, kütüphane silme — hepsi
   aynı bug'ı taşıyordu, tek satırla hepsi düzeliyor). */
.btn-icon svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.media-btn {
  opacity: 0.4;
}

.media-btn.active {
  opacity: 1;
  color: var(--primary);
}

/* Forms */

.field {
  margin-bottom: var(--space-4);
}

.field label {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

input[type="text"],
input[type="date"],
input[type="number"],
input[type="file"],
input[type="email"],
input[type="password"],
select,
textarea {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 12px;
  font-size: 16px;
  font-family: inherit;
}

textarea {
  resize: vertical;
  min-height: 64px;
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--primary);
  outline-offset: -1px;
}

.form-row {
  display: flex;
  gap: var(--space-3);
}

.form-row .field {
  flex: 1;
}

.add-form {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.add-form input {
  flex: 1;
}

/* Cards / lists */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}

.list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-3);
  min-height: 52px;
}

.list-item-main {
  flex: 1;
  min-width: 0;
}

.region-row-main {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.region-color-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--dot-color, var(--border-strong));
  flex-shrink: 0;
}

.list-item-main input[type="text"] {
  padding: 8px 10px;
}

.list-item-title {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-item-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* .list-item-title'ın tek-satır+ellipsis davranışını BİLEREK almıyor — gruplu
   duyuru metinleri (Yeni:/Düzeltildi: gibi) çok satırlı, geçmişte tam
   görünmesi gerekiyor. */
.broadcast-history-text {
  font-weight: 600;
  white-space: pre-line;
  line-height: 1.4;
}

.list-item-actions {
  display: flex;
  gap: var(--space-1);
  flex-shrink: 0;
}

/* Roster satırındaki opsiyonel izin anahtarı (ör. admin'in hoca listesindeki
   "Kütüphane" toggle'ı) — rosterUi.js'in item.toggle hook'u, opt-in. */
.list-item-toggle-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.list-item-toggle-label {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

a.list-item {
  text-decoration: none;
  color: inherit;
}

.empty-state {
  color: var(--text-muted);
  text-align: center;
  padding: var(--space-5) var(--space-3);
  font-size: 14px;
}

/* Month group headers (history) */

.month-heading {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin: var(--space-4) 0 var(--space-2);
}

.month-heading:first-child {
  margin-top: 0;
}

/* Weekly program view */

.week-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  text-align: center;
}

.week-nav .btn-icon {
  font-size: 22px;
  padding: var(--space-2) var(--space-3);
}

.week-range {
  font-weight: 700;
  font-size: 14px;
}

.week-cycle-note {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.week-grid {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-4);
  border-top: 1px solid var(--border);
}

.week-slot {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  border-bottom: 1px solid var(--border);
  padding: var(--space-3) var(--space-2) var(--space-3) var(--space-1);
  min-height: 60px;
}

.week-slot.empty {
  opacity: 0.55;
}

.week-slot.dragging {
  opacity: 0.4;
  background: var(--surface-2);
}

.week-slot-handle,
.week-slot-handle-spacer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 44px;
  flex-shrink: 0;
}

.week-slot-handle {
  color: var(--text-suggested);
  cursor: grab;
  touch-action: none;
}

.week-slot-handle:active {
  cursor: grabbing;
  color: var(--primary);
}

.week-slot-handle svg {
  width: 16px;
  height: 16px;
}

.week-slot-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
  cursor: pointer;
}

.week-slot.today::before {
  content: '';
  position: absolute;
  left: 0;
  top: var(--space-2);
  bottom: var(--space-2);
  width: 3px;
  border-radius: 2px;
  background: var(--primary);
}

.week-slot-day {
  display: flex;
  flex-direction: column;
  width: 78px;
  flex-shrink: 0;
  font-weight: 600;
  font-size: 13px;
}

.week-slot-date {
  font-weight: 400;
  font-size: 11px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-suggested);
  margin-top: 1px;
}

.week-slot-title {
  flex: 1;
  font-weight: 600;
  font-size: 13.5px;
  transition: color 0.2s ease;
}

/* dayEntry.js'teki tamamlanmış egzersiz adının aynı soluklaşması
   (.exercise-card.collapsed.marked .exercise-name) — haftalık listede de gün
   tamamlanınca başlık aynı şekilde soluklaşıyor. */
.week-slot.completed .week-slot-title {
  color: var(--text-muted);
}

.week-slot-sub {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-2);
  border-radius: 20px;
  padding: 3px 10px;
  flex-shrink: 0;
}

.week-slot-add {
  flex: 1;
  text-align: right;
  color: var(--text-suggested);
  font-size: 20px;
  font-weight: 300;
}

/* Exercise instance card (day entry) */

.exercise-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.6);
  padding: var(--space-3) var(--space-4) var(--space-4) 20px;
  margin-top: -18px;
  scroll-margin-top: calc(var(--header-h) + var(--safe-top) + var(--space-3));
}

.exercise-card:first-child {
  margin-top: 0;
}

/* Hedef bölge kenar çizgisi — dayEntry.js exercise.targetRegion varsa
   --region-color'ı inline set ediyor (util.js:regionColor), yoksa nötr kalır. */
.exercise-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 2px;
  background: var(--region-color, var(--border-strong));
}

.exercise-card.expanded {
  box-shadow: 0 16px 30px -14px rgba(0, 0, 0, 0.65);
}

.exercise-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  min-height: 28px;
}

.exercise-card-body:not(:empty) {
  margin-top: var(--space-2);
}

.accordion-chevron {
  flex-shrink: 0;
  width: 14px;
  color: var(--text-muted);
  font-size: 12px;
}

.exercise-name {
  flex: 1;
  font-weight: 700;
  font-size: 15px;
  transition: color 0.2s ease, font-weight 0.2s ease;
}

.exercise-card.collapsed.marked .exercise-name {
  color: var(--text-muted);
  font-weight: 600;
}

.exercise-status-icon {
  flex-shrink: 0;
  display: inline-flex;
}

.note-indicator {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--text-suggested);
}

.note-indicator svg {
  width: 14px;
  height: 14px;
  display: block;
}

.status-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #fff;
}

.status-badge svg {
  width: 11px;
  height: 11px;
  display: block;
}

.status-badge-good {
  background: var(--success);
}

.status-badge-bad {
  background: var(--danger);
}

.status-badge-neutral {
  background: var(--warning);
}

/* Rozet az önce kullanıcı tarafından seçildiyse (dayEntry.js `animate:true`
   geçtiğinde) büyüyüp-çizilme + halka patlama animasyonu; statusBadge()'in diğer
   tüm çağrıları (haftalık özet vb.) bu sınıfı hiç almadığı için etkilenmiyor. */

.status-badge-path {
  stroke-dasharray: 26;
  stroke-dashoffset: 0;
}

.status-badge-pop {
  animation: status-badge-pop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.status-badge-pop .status-badge-path {
  stroke-dashoffset: 26;
  animation: status-badge-draw 0.3s ease-out 0.14s forwards;
}

@keyframes status-badge-pop {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes status-badge-draw {
  to { stroke-dashoffset: 0; }
}

.status-badge-ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid transparent;
  opacity: 0;
  animation: status-badge-ring-burst 0.5s ease-out both;
}

.status-badge-good .status-badge-ring { border-color: var(--success); }
.status-badge-bad .status-badge-ring { border-color: var(--danger); }
.status-badge-neutral .status-badge-ring { border-color: var(--warning); }

@keyframes status-badge-ring-burst {
  0% { transform: scale(0.7); opacity: 0.7; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* Hedef bölge + hareket videosu (opsiyonel, Diğer > Ayarlar'dan kapatılabilir) */

.exercise-media-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}

.target-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.target-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 10px 4px 8px;
}

.target-pill .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pill-color, var(--border-strong));
  flex-shrink: 0;
}

/* Çoklu-seçim bölge ızgarası — exerciseCatalog.js ve libraryList.js'in ortak
   sheet'lerinde kullanılıyor, tek renkli hedef bölge kaldırıldı. */
.region-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.region-chip {
  appearance: none;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.region-chip.selected {
  background: rgba(201, 161, 90, 0.16);
  border-color: var(--primary);
  color: var(--primary);
}

.note-toggle,
.video-toggle-btn {
  background: transparent;
  border: none;
  color: var(--primary);
  font-size: 13px;
  padding: var(--space-2) 0;
  cursor: pointer;
  font-family: inherit;
}

.video-embed-frame {
  margin: 0 0 var(--space-3);
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  display: none;
}

.video-embed-frame.open {
  display: block;
}

.video-embed-thumb {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background:
    radial-gradient(circle at 50% 42%, rgba(201, 161, 90, 0.16), transparent 60%),
    var(--surface-2);
}

.video-embed-iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
}

.video-play-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  background: rgba(18, 19, 22, 0.55);
}

.video-play-btn svg {
  width: 18px;
  height: 18px;
}

.video-embed-caption {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  font-size: 11.5px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.video-embed-caption svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.video-embed-caption span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.last-time {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

.prescribed-block {
  border-top: 1px solid var(--border-strong);
  padding-top: var(--space-3);
  margin-bottom: var(--space-4);
}

.prescribed-block .block-label {
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primary-text);
  background: var(--primary);
  padding: 3px 8px 3px 6px;
  border-radius: 5px;
  margin-bottom: var(--space-3);
}

.prescribed-block .block-label svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.prescribed-fields {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: var(--space-3);
}

.prescribed-fields .field {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 3px;
  margin-bottom: 0;
}

.prescribed-fields label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-suggested);
  margin-bottom: 0;
}

.prescribed-fields input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid transparent;
  padding: 0 0 2px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  color: var(--primary);
}

.prescribed-fields input:focus {
  outline: none;
  border-bottom-color: var(--primary);
}

.prescribed-note-field {
  margin-top: var(--space-4);
  margin-bottom: 0;
}

.prescribed-note-field label {
  display: block;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-suggested);
  margin-bottom: 4px;
}

.prescribed-note-field input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid transparent;
  padding: 0 0 3px;
  font-size: 13px;
  font-style: italic;
  color: var(--text-muted);
}

.prescribed-note-field input:focus {
  outline: none;
  border-bottom-color: var(--primary);
}

/* Set rows */

.set-rows .block-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.set-row {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}

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

/* Tüm setler her zaman açık kalıyor — sadece çalışılan set (amber sol ray +
   kendi zemini) işaretleniyor, hiçbir satır gizlenmiyor/küçülmüyor. */
.set-row.active {
  border-bottom: none;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--warning);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-3) var(--space-3) 11px;
  margin: 4px 0;
}

.set-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.set-row-label {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
}

.set-row-bottom {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
  justify-content: center;
}

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

.number-field label {
  font-size: 11px;
  color: var(--text-muted);
}

.number-field-reps .number-picker-trigger {
  width: 72px;
}

.number-field-rir .number-picker-trigger {
  width: 56px;
}

.number-picker-trigger {
  appearance: none;
  width: 100%;
  height: 40px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: center;
  padding: 0 20px 0 4px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C606A' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 9px 9px;
}

.set-row.suggested .number-picker-trigger {
  color: var(--text-suggested);
  font-style: italic;
}

/* 0, ana ızgaradan ayrı kendi geniş butonunda — ızgara 1'den başlayınca satırlar
   doğal 5'li gruplara oturuyor (1-5, 6-10, 11-15...). */
.zero-btn {
  appearance: none;
  width: 100%;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
  border-radius: var(--radius-sm);
  height: 44px;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.zero-btn:active {
  background: var(--border);
}

.zero-btn.selected {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-text);
}

.zero-btn.target {
  border: 2px dashed var(--primary);
  color: var(--primary);
}

.zero-divider {
  border: none;
  border-top: 1px dashed var(--border);
  margin: var(--space-3) 0;
}

.number-picker-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-2);
  max-height: 50vh;
  overflow-y: auto;
  margin-bottom: var(--space-3);
}

.number-picker-cell {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  border-radius: var(--radius-sm);
  height: 48px;
  font-size: 17px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  position: relative;
}

.number-picker-cell:active {
  background: var(--border);
}

.number-picker-cell.selected {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-text);
}

.number-picker-cell.target {
  border: 2px dashed var(--primary);
  color: var(--primary);
}

.number-picker-cell.target::after {
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary);
}

.stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.stepper-btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  width: 40px;
  height: 40px;
  min-width: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}

.stepper-btn:active {
  background: var(--border);
}

.stepper .stepper-input {
  width: 84px;
  min-width: 0;
  text-align: center;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  border-radius: var(--radius-sm);
  height: 40px;
  font-size: 16px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  padding: 0 2px;
}

.stepper-unit {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--text-muted);
  width: 34px;
}

.set-row.suggested .stepper-input {
  color: var(--text-suggested);
  font-style: italic;
}

.stepper-group {
  margin-top: var(--space-2);
}

.stepper-group label {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

/* Süre/eğim/hız/mesafe/direnç gibi egzersize göre değişen alanlar — bkz. bu
   özelliğin geldiği sohbet. auto-fit ile 2-3 alan da aynı satıra sığdığı
   kadar sığıyor, kalanı doğal olarak alt satıra kayıyor. */
.dyn-stepper-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.dyn-stepper-grid .stepper-group {
  margin-top: 0;
}

.set-row-remove {
  flex-shrink: 0;
}

.add-set-btn {
  width: 100%;
  margin-top: var(--space-2);
  padding: 10px;
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  font-size: 14px;
  cursor: pointer;
}

/* Geri sayım sayacı (plank vb. süre-bazlı egzersizler) */

.countdown-trigger-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--primary);
  font-size: 11px;
  padding: 0 0 0 4px;
  cursor: pointer;
  vertical-align: middle;
}

.sheet-backdrop.countdown-backdrop {
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.countdown-modal {
  background: var(--surface);
  border-radius: var(--radius);
  padding: var(--space-5);
  width: 100%;
  max-width: 320px;
  text-align: center;
}

.countdown-label {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: var(--space-3);
}

.countdown-display {
  font-family: var(--font-mono);
  font-size: 64px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-bottom: var(--space-2);
}

.countdown-sub {
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: var(--space-4);
  min-height: 1em;
}

.countdown-modal.countdown-intense .countdown-display {
  color: var(--danger);
  animation: countdown-pulse 1s ease-in-out infinite;
}

.countdown-modal.countdown-done .countdown-display {
  color: var(--success);
}

@keyframes countdown-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* Exercise outcome status */

.status-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.status-row-label {
  font-size: 13px;
  color: var(--text-muted);
  margin-right: var(--space-1);
}

.status-btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-suggested);
  border-radius: 0;
  margin-left: -1px;
  width: 38px;
  height: 36px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.08s ease;
}

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

.status-btn:first-of-type {
  margin-left: 0;
  border-top-left-radius: var(--radius-sm);
  border-bottom-left-radius: var(--radius-sm);
}

.status-btn:last-of-type {
  border-top-right-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
}

.status-btn.active {
  color: #fff;
  position: relative;
  z-index: 1;
}

.status-btn-good.active {
  background: var(--success);
  border-color: var(--success);
}

.status-btn-bad.active {
  background: var(--danger);
  border-color: var(--danger);
}

.status-btn-neutral.active {
  background: var(--warning);
  border-color: var(--warning);
  color: var(--primary-text);
}

.day-complete-wrap {
  position: relative;
  margin-top: var(--space-4);
}

.day-complete-btn {
  margin-top: 0;
}

.day-complete-btn.active {
  background: rgba(111, 162, 135, 0.18);
  border-color: var(--success);
  color: var(--success);
}

.day-complete-btn.just-completed {
  animation: day-complete-bounce 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes day-complete-bounce {
  0% { transform: scale(1); }
  45% { transform: scale(1.035); }
  100% { transform: scale(1); }
}

.confetti-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}

.confetti-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  opacity: 0;
}

.confetti-dot.playing {
  animation: confetti-burst 0.7s ease-out both;
}

@keyframes confetti-burst {
  0% { transform: translate(-50%, -50%) scale(0.6); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .status-badge-pop,
  .status-badge-pop .status-badge-path,
  .status-badge-ring,
  .day-complete-btn.just-completed,
  .confetti-dot.playing {
    animation: none !important;
  }
  .status-badge-pop .status-badge-path {
    stroke-dashoffset: 0;
  }
}

/* Antrenman süresi */

.workout-timer-card {
  margin-bottom: var(--space-4);
}

.workout-timer-running,
.workout-timer-done {
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
}

.workout-timer-running strong,
.workout-timer-done strong {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Notes */

.note-textarea {
  margin-top: var(--space-2);
}

/* Picker / bottom sheet */

.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 20;
  display: flex;
  align-items: flex-end;
}

.sheet {
  width: 100%;
  max-height: 78vh;
  background: var(--surface);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: var(--space-4);
  padding-bottom: calc(var(--space-4) + var(--safe-bottom));
  display: flex;
  flex-direction: column;
}

.sheet-title {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: var(--space-3);
}

.sheet-search-input {
  margin-bottom: var(--space-3);
}

.sheet-list {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.sheet-list-item {
  padding: 14px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 15px;
}

.sheet-list-item:active {
  background: var(--surface-2);
}

.sheet-empty {
  color: var(--text-muted);
  text-align: center;
  padding: var(--space-4);
  font-size: 14px;
}

.sheet-close {
  margin-top: var(--space-3);
}

/* Dashboard */

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}

.stat-card .stat-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: var(--space-2);
}

.stat-card .stat-value {
  font-size: 22px;
  font-weight: 700;
}

.stat-card .stat-detail {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}


.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-muted);
}

.badge-warning {
  background: rgba(192, 134, 60, 0.18);
  color: var(--warning);
}

.badge-danger {
  background: rgba(193, 102, 90, 0.18);
  color: var(--danger);
}

/* Utility */

.muted {
  color: var(--text-muted);
}

.section {
  margin-bottom: var(--space-5);
}

.section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.coach-info-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  font-size: 14px;
  color: var(--text-muted);
}

.coach-info-card svg {
  width: 16px;
  height: 16px;
  color: var(--primary);
  flex-shrink: 0;
}

.coach-info-card strong {
  color: var(--text);
  font-weight: 700;
}

.more-menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.more-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  min-height: 52px;
}

.more-menu-item .chevron {
  color: var(--text-muted);
}

/* Settings */

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.setting-row + .setting-row {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.setting-row-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.setting-row-title {
  font-size: 14px;
  font-weight: 600;
}

.setting-row-sub {
  font-size: 12px;
  color: var(--text-muted);
}

.settings-toggle {
  appearance: none;
  width: 44px;
  height: 26px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 99px;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}

.settings-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: transform 0.2s ease, background 0.2s ease;
}

.settings-toggle.on {
  background: rgba(201, 161, 90, 0.18);
  border-color: var(--primary);
}

.settings-toggle.on::after {
  transform: translateX(18px);
  background: var(--primary);
}

/* Bulk program paste */

.bulk-add-link {
  margin-bottom: var(--space-4);
}

.bulk-intro {
  font-size: 13px;
  margin-bottom: var(--space-3);
  line-height: 1.5;
}

.bulk-textarea {
  width: 100%;
  min-height: 45vh;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: var(--space-3);
}

.bulk-block-card {
  padding: 0;
  overflow: hidden;
}

/* Günler arası sınırı net kılan renkli başlık şeridi + akordiyon — kullanıcının
   kendi isteği: A seçeneğinin bandı + B/C'nin aç/kapa davranışı birleşik.
   İlk gün her zaman açık, diğerleri kapalı geliyor (bkz. buildBlockCard'ın
   startOpen parametresi); kullanıcı istediği kadarını elle açabiliyor. */
.block-acc-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  background: linear-gradient(180deg, rgba(201, 161, 90, 0.14), rgba(201, 161, 90, 0.02));
}

.block-acc-header-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

/* Onaylanan "A" demosuyla birebir aynı renk/harf muamelesi — sadece arka plan
   şeridini kopyalayıp bunu unutmak, demonun "çok güzel" bulunan asıl farkını
   kaybetmek olurdu (bkz. feedback_show_demo_before_design_changes). */
.block-acc-header-title {
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--primary);
}

.block-acc-header-sub {
  font-size: 12px;
  color: var(--text-muted);
}

.block-acc-header-sub::before {
  content: "· ";
}

.block-acc-badge {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  padding: 2px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}

.block-acc-chev {
  color: var(--text-muted);
  font-size: 13px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.block-acc-header.collapsed .block-acc-chev {
  transform: rotate(-90deg);
}

/* Birden fazla gün varken hepsini tek tek açıp kapatmak yorucu — sadece 2+
   günde gösteriliyor (bkz. JS: blocks.length > 1). */
.toggle-all-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  margin: calc(var(--space-3) * -1) 0 var(--space-3);
}

.toggle-all-row button {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--primary);
  font: inherit;
  font-weight: 600;
  padding: 4px 2px;
  cursor: pointer;
}

.toggle-all-dot {
  color: var(--border-strong);
}

/* grid-template-rows: 1fr/0fr tekniği yerine max-height kullanıyoruz —
   içerik uzunluğu egzersiz sayısına göre çok değişken, ve 1fr, boyu "auto"
   olan bir kapsayıcıda beklendiği gibi genişlemiyor (test ederken yakalandı).
   2000px sadece "gerçek içerikten kesin uzun" bir tavan, gerçek yükseklik hiç
   önemli değil. overflow:hidden burada olduğu için .block-acc-body-inner'ın
   KENDİ padding'i de kapalıyken otomatik klipleniyor, ayrıca sıfırlamaya gerek yok. */
.block-acc-body {
  overflow: hidden;
  max-height: 2000px;
  transition: max-height 0.25s ease;
}

.block-acc-body.collapsed {
  max-height: 0;
}

.block-acc-body-inner {
  padding: var(--space-4);
}

.bulk-block-card .form-row {
  margin-bottom: var(--space-3);
}

.block-date-info {
  font-size: 12px;
  margin-bottom: var(--space-3);
  min-height: 1em;
}

.block-exercise-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.bulk-exercise-row {
  border-top: 1px solid rgba(201, 161, 90, 0.4);
  padding-top: var(--space-3);
}

.bulk-exercise-row-top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.bulk-ex-name-wrap {
  flex: 1;
  min-width: 0;
}

.bulk-ex-name-select {
  width: 100%;
  font-weight: 600;
}

.bulk-ex-name-select.unresolved {
  border-color: var(--danger);
  color: var(--danger);
}

.bulk-ex-suggest-btn {
  display: block;
  appearance: none;
  background: transparent;
  border: none;
  color: var(--primary);
  font-size: 11.5px;
  font-family: inherit;
  padding: 3px 0 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
}

/* Kendi Antrenmanım'da serbest yazılan bir egzersizi kütüphaneye bağlama —
   bkz. bunun geldiği sohbet + js/views/bulkAdd.js'teki wireLinkArea. Görünüşü
   bilerek .bulk-ex-suggest-btn'in aynısı (aynı satır, aynı işlev ailesi). */
.link-btn {
  display: block;
  appearance: none;
  background: transparent;
  border: none;
  color: var(--primary);
  font-size: 11.5px;
  font-family: inherit;
  padding: 3px 0 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
}

.linked-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0 0;
  font-size: 11.5px;
  color: var(--success);
  font-weight: 600;
}

.linked-chk {
  font-weight: 700;
}

.link-change-btn {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 11px;
  font-weight: 400;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

.bulk-ex-name:disabled {
  color: var(--text);
  opacity: 1;
  -webkit-text-fill-color: var(--text);
}

.bulk-exercise-row-fields {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.bulk-exercise-row-fields input {
  padding: 8px;
  font-size: 14px;
  text-align: center;
}

.bulk-ex-note {
  font-size: 13px;
  padding: 8px 10px;
}

/* Program kopyalarken, hocanın o gün için hedeflediği (prescribed) değerlerin
   yanında öğrencinin GERÇEKTE ne yaptığını da her zaman görünür tutuyor — hoca
   bunu görmeden aynı sayıları körlemesine ileri kopyalamasın diye (bkz.
   buildLastTimeInfo). Hiç set işaretlenmemiş egzersizlerde bu satır hiç
   basılmıyor, gösterecek gerçek bir veri yok çünkü. */
.bulk-ex-last-time {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-style: italic;
  color: var(--text-muted);
  margin: 2px 0 var(--space-2);
}

.bulk-ex-last-time .status-badge {
  width: 15px;
  height: 15px;
}

.bulk-ex-last-time .status-badge svg {
  width: 8px;
  height: 8px;
}

.bulk-ex-last-time-note {
  color: var(--text-muted);
}

/* Aynı haftaya iki program çakışmasını görünür kılıyor — bkz.
   getWeekConflict()/assignProgram.js ve bulkAdd.js'teki aynı akış. */
.week-conflict-banner {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  background: rgba(192,134,60,0.12);
  border: 1px solid var(--warning);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  font-size: 13px;
  line-height: 1.5;
}

.week-conflict-banner .week-conflict-flag {
  flex-shrink: 0;
}

.week-conflict-id {
  color: var(--text-muted);
  font-size: 12px;
}

/* Ağırlık/Set/Tekrar/Rir'in üstünde kalıcı etiket — dayEntry.js'in "Hoca" bloğundaki
   aynı fikir (değer girilince placeholder'ın kaybolup hangi alan olduğunu belirsiz
   bırakması sorununu çözüyor), ama görsel olarak bu ekranın kendi kutulu input
   stilini koruyor (prescribed-fields'ın altı-çizili minimal stili değil — onaylanan
   demo buydu). */
.bulk-exercise-row-fields .field {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 3px;
  margin-bottom: 0;
}

.bulk-exercise-row-fields .field label {
  font-size: 11px;
  color: var(--text-muted);
}

/* Set/Tekrar/Rir artık <input> değil <button> — global input[type=...] kutulu
   stilini miras almıyor, o yüzden aynı görünümü burada elle tekrar ediyoruz. */
.bulk-picker-trigger {
  appearance: none;
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 8px;
  font-size: 14px;
  font-family: inherit;
  text-align: center;
}

.bulk-picker-trigger.empty {
  color: var(--text-suggested);
}

.range-readout {
  text-align: center;
  color: var(--primary);
  font-size: 13px;
  margin-bottom: var(--space-3);
  min-height: 16px;
}

.number-picker-cell.range-mid {
  background: color-mix(in srgb, var(--primary) 30%, var(--surface-2));
  border-color: var(--primary);
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
}

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

.checkbox-row label {
  font-size: 14px;
  color: var(--text);
}

.grid-disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* Roster (admin/hoca) + davet linki */

.invite-link-card {
  padding: var(--space-4);
}

.invite-link-row {
  display: flex;
  gap: var(--space-2);
}

.invite-link-input {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-family: var(--font-mono);
  color: var(--text-muted);
}

.invite-copy-btn {
  flex-shrink: 0;
  padding: 10px 14px;
}

.copy-label-text {
  transition: opacity 0.15s ease;
}

.invite-copy-btn,
.invite-copy-again-btn {
  transition: background 0.6s ease, border-color 0.6s ease, color 0.6s ease, box-shadow 0.6s ease;
}

.invite-copy-btn.is-copied {
  background: var(--success);
  border-color: var(--success);
  color: var(--primary-text);
  box-shadow: 0 0 0 3px rgba(111, 162, 135, 0.4);
}

.invite-copy-again-btn.is-copied {
  color: var(--success);
  background: rgba(111, 162, 135, 0.18);
  box-shadow: 0 0 0 3px rgba(111, 162, 135, 0.3);
  border-radius: 8px;
}

.roster-pending-section {
  margin-bottom: var(--space-4);
}

.roster-pending-heading {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: var(--space-2);
}

/* İstatistik şeridi — bugün tek taş (sayım), ileride yanına eklenir diye
   .stat-card'dan (tek büyük özet kartı) bilerek ayrı, kompakt bir bileşen. */
.stat-strip {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.stat-strip:empty {
  margin-bottom: 0;
}

.stat-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  min-width: 84px;
}

.stat-tile.warn {
  border-color: var(--danger);
}

.stat-tile .stat-tile-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.1;
}

.stat-tile.warn .stat-tile-value {
  color: var(--danger);
}

.stat-tile .stat-tile-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-top: 3px;
}

.search-hint {
  font-size: 12.5px;
  color: var(--text-suggested);
  min-height: 18px;
  margin: -6px 0 var(--space-3) 2px;
}

.search-hint.active {
  color: var(--warning);
}

/* libraryList.js'in serbest "Ekle" kutusuna kataloğa bağlama önerisi — bkz.
   bu özelliğin geldiği sohbet (yazım hatalarının kataloğa hiç bağlanmadan
   yıllarca sessizce kalabildiği giriş kapısı). Var olan bir kaydı
   etkileyecekse "Ekle" o an devre dışı, sadece bu kutudaki düğmeyle,
   göre göre ilerlenebiliyor. */
.exercise-bind-suggestion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: calc(var(--space-3) * -1) 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: rgba(201, 161, 90, 0.1);
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
}

.exercise-bind-suggestion b {
  color: var(--primary);
}

.exercise-bind-btn {
  flex-shrink: 0;
  appearance: none;
  background: var(--primary);
  border: none;
  border-radius: 999px;
  color: #1b1508;
  font-weight: 700;
  font-family: inherit;
  font-size: 12px;
  padding: 6px 12px;
  cursor: pointer;
}

.list-item.hidden-by-filter {
  display: none;
}

/* Haftalık özet */

.week-summary-link {
  margin-bottom: var(--space-4);
}

/* Hocanın Takvim ekranındaki Haftalık Özet/Masaüstü Özeti sekme anahtarı —
   route değişmiyor, sadece #schedule-content'in içeriği değişiyor. */
.schedule-view-toggle {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.schedule-toggle-btn {
  flex: 1;
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.schedule-toggle-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-text);
}

.summary-range {
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: var(--space-4);
}

.summary-overview {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.summary-stat {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  text-align: center;
}

.summary-stat strong {
  display: block;
  font-size: 22px;
}

.summary-stat span {
  font-size: 12px;
  color: var(--text-muted);
}

.summary-stat.good strong {
  color: var(--success);
}

.summary-stat.bad strong {
  color: var(--danger);
}

.summary-days {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.summary-day {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
}

.summary-day-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-weight: 700;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.summary-day-header-left {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

/* Hocanın Takvim ekranına ÖZEL akordiyon davranışı — .summary-day/-header,
   öğrencinin kendi Haftalık/Masaüstü Özeti'nde de aynı isimlerle kullanılıyor
   ama hep tam açık, akordiyon değil; bu yüzden kurallar `.summary-days-accordion`
   üst sınıfına sıkı sıkıya bağlı, o sınıf olmayan hiçbir yeri etkilemiyor. */
.summary-days-accordion .summary-day-header {
  cursor: pointer;
}

.summary-days-accordion .accordion-chevron {
  display: inline-block;
  transition: transform 0.15s ease;
}

.summary-days-accordion .summary-day:not(.collapsed) .accordion-chevron {
  transform: rotate(90deg);
}

.summary-days-accordion .summary-day.collapsed .summary-day-body {
  display: none;
}

.summary-exercise {
  padding: var(--space-2) 0;
}

.summary-exercise + .summary-exercise {
  border-top: 1px dashed var(--border);
}

.summary-exercise-name {
  font-weight: 600;
  margin-bottom: 2px;
}

.summary-exercise-row {
  font-size: 14px;
}

.summary-label {
  color: var(--text-muted);
}

.summary-exercise-coachnote {
  font-size: 13px;
  color: var(--primary);
  font-style: italic;
  margin-top: 2px;
}

.summary-exercise-note {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 2px;
}

/* Masaüstü özeti (tablo görünümü) */

body.chrome-hidden .app-header,
body.chrome-hidden .bottom-nav {
  display: none;
}

body.chrome-hidden #view-root {
  min-height: 100vh;
  padding: var(--space-4);
}

.desktop-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.desktop-day-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.desktop-day-row .desktop-day-block {
  flex: 1 1 620px;
}

.desktop-day-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
}

.desktop-day-header {
  font-weight: 700;
  margin-bottom: var(--space-3);
}

.desktop-table-scroll {
  overflow-x: auto;
}

.desktop-table {
  width: 100%;
  min-width: 640px;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 13px;
}

.desktop-table th,
.desktop-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  overflow-wrap: break-word;
}

.desktop-table th {
  color: var(--text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.desktop-ex-name {
  min-width: 160px;
}

.desktop-ex-prescribed {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.desktop-ex-note {
  white-space: normal;
  color: var(--text-muted);
  font-style: italic;
  min-width: 140px;
}

.desktop-note-coach {
  color: var(--primary);
}

.desktop-note-athlete {
  color: var(--text-muted);
}

.desktop-note-coach + .desktop-note-athlete {
  margin-top: 4px;
}

/* Dinlenme kronometresi (floating, sürüklenebilir) */

.rest-timer-btn {
  position: fixed;
  right: var(--space-4);
  bottom: calc(var(--nav-h) + var(--safe-bottom) + var(--space-4));
  z-index: 15;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 3px solid var(--primary);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  touch-action: none;
  user-select: none;
  transition: width 0.25s cubic-bezier(0.32, 0.9, 0.28, 1), height 0.25s cubic-bezier(0.32, 0.9, 0.28, 1), font-size 0.25s ease;
}

.rest-timer-btn.big {
  width: 192px;
  height: 192px;
  font-size: 38px;
  border-width: 4px;
}

.rest-timer-btn.running {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-text);
}

.rest-timer-btn.dragging {
  opacity: 0.85;
  transition: none;
}

.rest-timer-btn.dragging .ripple-ring {
  animation: none;
  opacity: 0;
}

.rest-timer-time {
  position: relative;
  z-index: 1;
}

/* Uzun basış boyu değiştirdiğinde de aynı ripple kullanılsın diye — büyük/küçük
   fark etmeksizin tek animasyon dili (kullanıcı isteği: "küçükte de bu efekte dön"). */
.ripple-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--primary);
  opacity: 0;
  pointer-events: none;
}

.rest-timer-btn.running .ripple-ring {
  animation: rest-timer-ripple 2.4s ease-out infinite;
}

.rest-timer-btn.running .ripple-ring.d2 {
  animation-delay: 1.2s;
}

@keyframes rest-timer-ripple {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.55); opacity: 0; }
}

body.auth-gate .rest-timer-btn,
body.chrome-hidden .rest-timer-btn {
  display: none;
}

/* Hoca — öğrenci ölçümleri (yansıyan diyagram) */

.timeline-note {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}

.timeline-note b {
  color: var(--text);
  font-weight: 600;
}

.gender-toggle {
  display: flex;
  margin-bottom: var(--space-3);
  width: fit-content;
}

.gender-btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-suggested);
  margin-left: -1px;
  padding: 6px 16px;
  font-size: 12px;
  font-family: inherit;
}

.gender-btn:first-of-type {
  border-top-left-radius: var(--radius-sm);
  border-bottom-left-radius: var(--radius-sm);
  margin-left: 0;
}

.gender-btn:last-of-type {
  border-top-right-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
}

.gender-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-text);
  font-weight: 700;
}

.diagram-row {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.body-diagram-wrap {
  flex-shrink: 0;
  width: 118px;
}

.body-diagram-wrap svg {
  display: none;
}

.body-diagram-wrap svg.shown {
  display: block;
}

.body-part {
  fill: var(--surface-2);
  stroke: var(--border-strong);
  stroke-width: 1;
  transition: fill 0.3s ease, stroke 0.3s ease;
}

.body-part.lit {
  fill: rgba(201, 161, 90, 0.28);
  stroke: var(--primary);
  stroke-width: 1.5;
}

.measure-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.measure-row {
  appearance: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid transparent;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  color: inherit;
}

.measure-row.focused {
  background: var(--surface-2);
  border-color: var(--border);
}

.measure-row svg {
  width: 15px;
  height: 15px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.measure-row.focused svg {
  color: var(--primary);
}

.measure-row-label {
  flex: 1;
  display: flex;
  flex-direction: column;
  font-size: 12.5px;
  color: var(--text-muted);
  min-width: 0;
}

.measure-row.focused .measure-row-label {
  color: var(--text);
}

.measure-row-dates {
  font-size: 10px;
  color: var(--text-suggested);
  margin-top: 1px;
}

.measure-row-val {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  flex-shrink: 0;
}

.sheet-sub {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}

/* "Sistem Mesajı Gönder"in taslak-değişiklik listesi — bkz. adminApp.js
   openBroadcastSheet. Kategoriye göre gruplu, çoklu-seçim; seçilenler alttaki
   metin kutusuna formatlanmış olarak ekleniyor. */
.drafts-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.drafts-label h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  margin: 0;
  font-weight: 700;
}

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

.cat-group {
  margin-bottom: var(--space-3);
}

.cat-heading {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 6px;
}

.draft-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  cursor: pointer;
}

.draft-item.checked {
  border-color: var(--primary);
  background: rgba(201, 161, 90, 0.1);
}

.draft-check {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--border-strong);
  flex-shrink: 0;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--bg);
}

.draft-item.checked .draft-check {
  background: var(--primary);
  border-color: var(--primary);
}

.draft-text {
  flex: 1;
  line-height: 1.4;
}

.draft-dismiss {
  appearance: none;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 15px;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0 2px;
  line-height: 1;
}

.draft-dismiss:hover {
  color: var(--danger);
}

.add-selected-btn {
  width: 100%;
  padding: 10px;
  margin: var(--space-2) 0 var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--primary);
  font-weight: 600;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}

.add-selected-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.sheet .divider {
  height: 1px;
  background: var(--border);
  margin: var(--space-4) 0;
}

.confirm-sheet-message {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 var(--space-4);
  white-space: pre-line;
}

.confirm-sheet-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.sheet-field {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.sheet-field input {
  flex: 1;
}

.sheet-field input[type="date"] {
  flex: 0 0 150px;
}

.measure-progress-title {
  margin-top: var(--space-4);
}

.measure-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.measure-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}

.measure-card-info {
  flex-shrink: 0;
  width: 84px;
}

.measure-card-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.measure-card-val {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 18px;
  font-weight: 700;
  margin-top: 2px;
}

.measure-card-delta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.measure-card-dates {
  font-size: 10px;
  color: var(--text-suggested);
  margin-top: 3px;
}

.measure-card svg.spark {
  flex: 1;
  height: 34px;
}