/* X Protocol W2 — редактор программы: модалки, звёздные уровни, полосы действий.
   Loaded after design-w2-settings-training.css. */

.ex-gif-popup-actions {
  display:flex;
  gap:var(--w2-s2)
}

.ex-gif-popup-actions button {
  border-radius:var(--w2-s2);
  font:600 12px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  border:1px solid var(--border);
  transition: color .14s, background-color .14s, border-color .14s, box-shadow .14s, transform .14s, opacity .14s;
  padding:var(--w2-s3) var(--w2-s3)
}

.ex-gif-popup-actions .save {
  flex:1;
  background:var(--green);
  color:#000;
  border-color:var(--green)
}

.ex-gif-popup-actions .save:hover {
  background:var(--green);
  box-shadow:0 0 14px var(--green-glow)
}

.ex-gif-popup-actions .save.disabled {
  background:transparent;
  color:var(--text-dim);
  border-color:var(--border);
  cursor:default;
  pointer-events:none;
  box-shadow:none
}

.ex-gif-popup-actions .del {
  background:transparent;
  color:var(--text-dim);
  flex-shrink:0
}

.ex-gif-popup-actions .del:hover {
  color:var(--error);
  border-color:rgba(241,70,44,.4);
  background:rgba(241,70,44,.06)
}

/* Card list + Drag */
.ex-card-list {
  display:flex;
  flex-direction:column;
  gap:var(--w2-s2);
  margin-top:var(--w2-s2);
  width:100%
}

#ss-center .prog-day-ex .ex-reorder-btns {
  display:flex;
  flex-direction:column;
  gap:var(--w2-s1);
  margin-right:var(--w2-s1);
  flex-shrink:0
}

#ss-center .prog-day-ex .ex-reorder-btn {
  padding:var(--w2-s1);
  border:0;
  border-radius:var(--w2-s1);
  background:transparent;
  color:rgba(255,255,255,.35);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: color .18s, background-color .18s, border-color .18s, box-shadow .18s, transform .18s, opacity .18s;
  line-height:1
}

#ss-center .prog-day-ex .ex-reorder-btn:hover {
  color:var(--green);
  background:rgba(200,241,53,.08)
}

#ss-center .prog-day-ex .ex-reorder-btn svg {
  width:max(10px,0.52vw);
  height:max(10px,0.52vw);
  stroke:currentColor;
  fill:none;
  stroke-width:2.5
}

#ss-center .prog-day-ex .ex-reorder-btn.disabled {
  opacity:.15;
  pointer-events:none
}

#ss-center .prog-day-ex.dragging {
  opacity:.3
}

#ss-center .prog-day-ex.drag-over {
  border-color:var(--green);
  box-shadow:inset 0 0 8px rgba(200,241,53,.25),0 0 4px rgba(200,241,53,.3);
  background:rgba(200,241,53,.06)
}

/* RECORDS GIF CARDS */
.rec-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(10.42vw,1fr));
  gap:var(--w2-s3)
}

.rec-card {
  border-radius:var(--w2-s3);
  overflow:hidden;
  border:1px solid var(--border);
  background:var(--surface-el);
  position:relative;
  transition:border-color .14s;
}

.rec-card:hover {
  border-color:var(--border-hi)
}

.rec-card img {
  width:100%;
  height:6.25vw;
  object-fit:cover;
  display:block;
  background:#16181A;
  transition:transform .2s,filter .2s
}

.rec-card:hover img {
  transform:scale(1.04);
  filter:brightness(1.15)
}

.rec-card-info {
  padding:var(--w2-s2) var(--w2-s3);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--w2-s2)
}

.rec-card-name {
  font:600 12px/1.2 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  flex:1
}

.rec-card-url {
  font:500 12px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  color:var(--text-dim);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:6.25vw
}

.rec-add {
  border:1px dashed var(--border);
  border-radius:var(--w2-s3);
  padding:var(--w2-s3) var(--w2-s3);
  display:flex;
  align-items:center;
  gap:var(--w2-s2);
  background:rgba(255,255,255,.01);
  margin-top:var(--w2-s3);
}

.rec-add input {
  flex:1;
  min-width:4.17vw;
  padding:var(--w2-s2) var(--w2-s2);
  font:500 12px/1.2 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  color:var(--text);
  background:transparent;
  border:1px solid var(--border);
  border-radius:var(--w2-s2);
}

.rec-add input:focus {
  outline:0;
  border-color:var(--green)
}

.rec-add .btn {
  flex-shrink:0
}

/* ADD EXERCISE MODAL */
.tr-modal-overlay {
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(0,0,0,.65);
  display:none;
  align-items:center;
  justify-content:center;
  animation:fadeIn .14s
}

.tr-modal-overlay.open {
  display:flex
}

.tr-modal {
  width:27.08vw;
  max-width:94vw;
  max-height:88vh;
  background:#26282B;
  border:1px solid var(--border-hi);
  border-radius:var(--w2-s3);
  display:flex;
  flex-direction:column;
  overflow:hidden
}

.tr-modal-head {
  padding:var(--w2-s4) var(--w2-s5);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between
}

.tr-modal-head h3 {
  font:700 14px/1 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  color:var(--text);
  margin:0
}

.tr-modal-close {
  background:transparent;
  border:0;
  color:var(--text-mute);
  cursor:pointer;
  font-size:14px;
  padding:var(--w2-s1);
  line-height:1
}

.tr-modal-close:hover {
  color:var(--text)
}

.tr-modal-body {
  padding:var(--w2-s5);
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:var(--w2-s3)
}

.tr-modal-field {
  display:flex;
  flex-direction:column;
  gap:var(--w2-s1)
}

.tr-modal-field label {
  font:600 12px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-dim)
}

.tr-modal-field input,.tr-modal-field select {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--w2-s2);
  padding:var(--w2-s2) var(--w2-s3);
  color:var(--text);
  font:500 12px/1.2 'Inter',sans-serif
}

.tr-modal-field input:focus,.tr-modal-field select:focus {
  outline:0;
  border-color:var(--green)
}

.tr-modal-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--w2-s3)
}

.tr-modal-chips {
  display:flex;
  flex-wrap:wrap;
  gap:var(--w2-s1)
}

.tr-modal-chip {
  padding:var(--w2-s1) var(--w2-s2);
  border:1px solid var(--border);
  border-radius:var(--w2-s1);
  background:transparent;
  color:var(--text-mute);
  font:500 12px/1 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  cursor:pointer;
  transition: color .14s, background-color .14s, border-color .14s, box-shadow .14s, transform .14s, opacity .14s;
}

.tr-modal-chip.active {
  border-color:var(--green);
  color:var(--green);
  background:rgba(200,241,53,.06)
}

.tr-modal-chip.secondary-active {
  border-color:rgba(255,215,64,.4);
  color:#FFD740;
  background:rgba(255,215,64,.06)
}

.tr-modal-foot {
  padding:var(--w2-s3) var(--w2-s5);
  border-top:1px solid var(--border);
  background:#1E2023
}

.tr-modal-submit {
  display:block;
  width:100%;
  padding:var(--w2-s3);
  border-radius:var(--w2-s2);
  font:700 12px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-align:center;
  cursor:pointer;
  transition: color .18s, background-color .18s, border-color .18s, box-shadow .18s, transform .18s, opacity .18s;
  border:1px solid var(--border);
  background:var(--green);
  color:#000;
}

.tr-modal-submit:hover {
  background:#fff;
  box-shadow:0 0 20px var(--green-glow)
}

.tr-modal-submit.disabled {
  background:transparent;
  color:var(--text-dim);
  border-color:var(--border);
  cursor:default;
  pointer-events:none
}

/* Progression builder in add-ex modal */
.trm-add-prog-btn {
  width:100%;
  padding:var(--w2-s2);
  border:1px dashed rgba(255,215,64,.3);
  border-radius:var(--w2-s2);
  background:transparent;
  color:#FFD740;
  font:600 12px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  letter-spacing:.08em;
  cursor:pointer;
  transition: color .14s, background-color .14s, border-color .14s, box-shadow .14s, transform .14s, opacity .14s;
  margin-top:var(--w2-s1);
}

.trm-add-prog-btn:hover {
  border-color:#FFD740;
  background:rgba(255,215,64,.06)
}

.trm-prog-row {
  display:flex;
  align-items:center;
  gap:var(--w2-s2);
  padding:var(--w2-s2) var(--w2-s3);
  margin-bottom:var(--w2-s1);
  border:1px solid rgba(255,215,64,.18);
  border-radius:var(--w2-s2);
  background:rgba(255,215,64,.03);
}

.trm-prog-stars {
  display:flex;
  gap:var(--w2-s1);
  flex-shrink:0
}

.trm-prog-stars svg {
  width:max(11px,0.62vw);
  height:max(11px,0.62vw);
  fill:#FFD740
}

.trm-prog-row input {
  flex:1;
  min-width:0;
  background:transparent;
  border:0;
  border-bottom:1px solid transparent;
  color:var(--text);
  font:500 12px/1.2 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  padding:var(--w2-s1) var(--w2-s1);
  transition:border-color .14s;
}

.trm-prog-row input:hover {
  border-bottom-color:var(--border)
}

.trm-prog-row input:focus {
  outline:0;
  border-bottom-color:#FFD740
}

.trm-prog-wt {
  font:600 12px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:var(--w2-s1) var(--w2-s2);
  border-radius:var(--w2-s1);
  cursor:pointer;
  border:1px solid var(--border);
  transition: color .14s, background-color .14s, border-color .14s, box-shadow .14s, transform .14s, opacity .14s;
  user-select:none;
  white-space:nowrap;
  flex-shrink:0;
}

.trm-prog-wt.w-ext {
  color:rgba(255,255,255,.55);
  border-color:rgba(255,255,255,.3);
  background:rgba(255,255,255,.06)
}

.trm-prog-wt.w-none {
  color:var(--text-mute);
  border-color:var(--border)
}

.trm-prog-wt.w-bw-band {
  color:rgba(255,255,255,.55);
  border-color:rgba(255,255,255,.3);
  background:rgba(255,255,255,.06)
}

.trm-prog-del {
  padding:var(--w2-s1);
  border:0;
  border-radius:var(--w2-s1);
  background:transparent;
  color:rgba(255,255,255,.25);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition: color .14s, background-color .14s, border-color .14s, box-shadow .14s, transform .14s, opacity .14s;
  flex-shrink:0;
}

.trm-prog-del svg {
  width:max(10px,0.57vw);
  height:max(10px,0.57vw);
  stroke:currentColor;
  fill:none;
  stroke-width:2
}

.trm-prog-del:hover {
  color:rgba(255,255,255,.55);
  background:rgba(255,255,255,.08)
}

/* ============ END TRAINING SETTINGS CSS ============ */

/* Миниатюры упражнений в редакторе программы: были почти нечитаемыми
   (правка Романа 12.08) — крупнее и с сохранением пропорций */
:is(#screen-settings, #screen-workout) .prog-day-ex .ex-gif-cell {
  width: clamp(88px, 6.2vw, 120px);
  height: clamp(64px, 4.6vw, 88px);
  flex-shrink: 0;
  border-radius: var(--w2-s3);
  overflow: hidden;
}
:is(#screen-settings, #screen-workout) .prog-day-ex .ex-gif-cell img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
:is(#screen-settings, #screen-workout) .prog-day-ex .ex-gif-cell.empty {
  display: grid; place-items: center;
  border: 1px dashed rgba(255, 255, 255, .16);
  color: var(--w2-text-quiet);
  font: 700 12px/1 'JetBrains Mono', monospace; letter-spacing: .08em;
}