/* ============ RULES CARD ============ */
.ss-rules-card {
  padding:var(--w2-s5) var(--w2-s5);
  border:1px dashed var(--border);
  border-radius:var(--w2-s3);
  background:rgba(255,255,255,.012);
}

.ss-rules-block-title {
  font:700 12px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:var(--w2-s3);
}

.ss-rules-list {
  display:flex;
  flex-direction:column;
  gap:var(--w2-s3);
  margin-bottom:var(--w2-s1)
}

.ss-rule-row {
  display:flex;
  align-items:flex-start;
  gap:var(--w2-s3);
  font:400 14px/1.5 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  color:var(--text-mute)
}

.ss-rule-row b {
  color:var(--text);
  font-weight:700
}

.ss-rule-badge {
  flex-shrink:0;
  width:max(20px,1.15vw);
  height:max(20px,1.15vw);
  display:grid;
  place-items:center;
  border-radius:var(--w2-s2);
  font:700 12px/1 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  background:rgba(255,255,255,.05);
  color:var(--text-mute);
  margin-top:var(--w2-s1);
}

.ss-rule-badge.cur {
  background:rgba(200,241,53,.08);
  border:1px solid rgba(200,241,53,.24);
  color:var(--green)
}

.ss-rule-badge.overdue {
  background:rgba(241,70,44,.08);
  border:1px solid rgba(241,70,44,.24);
  color:#F1462C
}

.ss-rule-badge.done {
  background:rgba(200,241,53,.08);
  border:1px solid rgba(200,241,53,.24);
  color:#C8F135
}

.ss-rule-arr {
  flex-shrink:0;
  width:max(20px,1.15vw);
  height:max(20px,1.15vw);
  display:grid;
  place-items:center;
  font:700 14px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  color:var(--green);
  margin-top:var(--w2-s1);
}

.ss-rules-sep {
  height:1px;
  margin:var(--w2-s4) 0;
  background:linear-gradient(90deg,transparent,var(--border),transparent);
}

/* === Правила показа · v2 (компактный mini-timeline) === */
.ss-rules-card-v2 {
  padding:var(--w2-s4) var(--w2-s5)
}

.ss-rules-tl {
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
  gap:var(--w2-s3);
  align-items:stretch;
  margin-bottom:var(--w2-s3);
}

.ss-rule-step {
  padding:var(--w2-s3) var(--w2-s3);
  border:1px solid var(--border);
  border-radius:var(--w2-s3);
  background:var(--surface);
  display:flex;
  flex-direction:column;
  gap:var(--w2-s1);
}

.ss-rule-step-bdg {
  align-self:flex-start;
  padding:var(--w2-s1) var(--w2-s2);
  border-radius:var(--w2-s1);
  font:700 12px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  letter-spacing:.08em;
  text-transform:uppercase;
  border:1px solid var(--border-hi);
  color:var(--text-mute);
  background:rgba(255,255,255,.03);
}

.ss-rule-status-icon {
  width:1em;
  height:1em;
  margin-right:var(--w2-s1);
  vertical-align:-.12em
}

.ss-rule-step-ttl {
  font:700 14px/1.2 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  color:var(--text);
}

.ss-rule-step-sub {
  font:400 12px/1.35 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  color:var(--text-dim);
}

.ss-rule-step-dim .ss-rule-step-bdg {
  color:var(--text-dim)
}

.ss-rule-step-cur {
  border-color:rgba(200,241,53,.28);
  background:rgba(200,241,53,.04)
}

.ss-rule-step-cur .ss-rule-step-bdg {
  color:var(--green);
  border-color:rgba(200,241,53,.35);
  background:rgba(200,241,53,.08)
}

.ss-rule-step-overdue {
  border-color:rgba(241,70,44,.28);
  background:rgba(241,70,44,.04)
}

.ss-rule-step-overdue .ss-rule-step-bdg {
  color:#F1462C;
  border-color:rgba(241,70,44,.35);
  background:rgba(241,70,44,.08)
}

.ss-rule-step-done {
  border-color:rgba(200,241,53,.28);
  background:rgba(200,241,53,.04)
}

.ss-rule-step-done .ss-rule-step-bdg {
  color:#C8F135;
  border-color:rgba(200,241,53,.35);
  background:rgba(200,241,53,.08)
}

.ss-rules-tl-arrow {
  align-self:center;
  font:700 14px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  color:var(--text-dim);
}

.ss-rules-tl-arrow svg {
  width:1em;
  height:1em
}

.ss-rules-principles {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--w2-s2) var(--w2-s4);
  padding-top:var(--w2-s3);
  border-top:1px dashed var(--border);
  font:400 12px/1.4 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  color:var(--text-mute);
}

.ss-rules-pr b {
  color:var(--text);
  font-weight:700
}

.ss-rules-pr-sep {
  color:var(--text-dim);
  opacity:.5
}

@media (max-width:900px) {
  .ss-rules-tl {
    grid-template-columns:1fr;
    gap:var(--w2-s2)
  }

  .ss-rules-tl-arrow {
    display:none
  }

}

.ss-rules-leads {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(9.4vw,1fr));
  gap:var(--w2-s3);
}

.ss-lead {
  padding:var(--w2-s3) var(--w2-s4);
  border:1px solid var(--border);
  border-radius:var(--w2-s3);
  background:var(--surface);
}

.ss-lead-k {
  font:700 12px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:var(--w2-s2);
}

.ss-lead-v {
  font:700 14px/1 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  color:var(--text);
  margin-bottom:var(--w2-s1);
  letter-spacing:-.01em;
}

.ss-lead-v b {
  color:var(--green);
  font-weight:800
}

.ss-lead-sub {
  font:400 12px/1 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  color:var(--text-dim);
}

/* Section-head для «Настройки показа»: idx + title на строке, hint под ними, reset справа */
.ss-display-head {
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  column-gap:var(--w2-s3);
  row-gap:var(--w2-s1);
}

.ss-display-head .ss-section-idx {
  grid-column:1;
  grid-row:1/span 2;
  align-self:start;
  padding-top:var(--w2-s1)
}

.ss-display-head .ss-section-title {
  grid-column:2;
  grid-row:1
}

.ss-display-head .ss-section-hint {
  grid-column:2;
  grid-row:2;
  margin-left:0
}

.ss-display-head .ss-lead-reset {
  grid-column:3;
  grid-row:1/span 2;
  margin-left:0
}

/* === Настройки показа · Leads v2 (визуальный таймлайн) === */
.ss-lead-reset {
  margin-left:auto;
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  gap:var(--w2-s2);
  padding:var(--w2-s2) var(--w2-s3);
  border-radius:var(--w2-s2);
  border:1px solid var(--border);
  background:transparent;
  color:var(--text-mute);
  font:600 12px/1 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  letter-spacing:.02em;
  cursor:pointer;
  transition: color .14s, background-color .14s, border-color .14s, box-shadow .14s, transform .14s, opacity .14s;
  white-space:nowrap;
}

.ss-lead-reset span {
  white-space:nowrap
}

.ss-lead-reset:hover {
  color:var(--text);
  border-color:var(--border-hi);
  background:var(--surface)
}

.ss-lead-reset svg {
  width:max(11px,0.63vw);
  height:max(11px,0.63vw);
  flex-shrink:0
}

.ss-leads-v2 {
  display:flex;
  flex-direction:column;
  gap:var(--w2-s3)
}

.ss-lead2 {
  display:grid;
  grid-template-columns:minmax(7.8vw,1fr) minmax(8.3vw,1.4fr) auto;
  align-items:center;
  column-gap:var(--w2-s4);
  padding:var(--w2-s3) var(--w2-s4);
  border:1px solid var(--border);
  border-radius:var(--w2-s3);
  background:var(--surface);
  min-width:0;
}

.ss-lead2-head {
  min-width:0
}

.ss-lead2-ttl {
  font:700 14px/1.2 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  color:var(--text);
  margin-bottom:var(--w2-s1);
}

.ss-lead2-hint {
  font:400 12px/1.35 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  color:var(--text-dim);
}

.ss-lead2-tl {
  position:relative;
  height:max(46px,2.7vw);
  padding:0 var(--w2-s3);
  min-width:0;
}

.ss-lead2-track {
  position:absolute;
  left:var(--w2-s3);
  right:var(--w2-s3);
  top:var(--w2-s5);
  height:2px;
  background:var(--border);
  border-radius:var(--w2-s1);
}

.ss-lead2-fill {
  position:absolute;
  left:var(--w2-s3);
  right:var(--w2-s3);
  top:var(--w2-s5);
  height:2px;
  background:linear-gradient(90deg, rgba(200,241,53,.55), rgba(200,241,53,.18));
  border-radius:var(--w2-s1);
}

.ss-lead2-dot {
  position:absolute;
  top:var(--w2-s3);
  width:max(20px,1.15vw);
  height:max(20px,1.15vw);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font:700 12px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  border:1.5px solid;
  background:var(--surface);
  box-sizing:border-box;
}

.ss-lead2-dot-a {
  left:var(--w2-s3);
  color:var(--green);
  border-color:var(--green);
  background:rgba(200,241,53,.08);
  transform:translateX(-50%);
}

.ss-lead2-dot-b {
  right:var(--w2-s3);
  color:var(--text-mute);
  border-color:var(--border-hi);
  background:var(--surface);
  transform:translateX(50%);
  border-style:dashed;
}

.ss-lead2-dot-b svg {
  width:max(10px,0.57vw);
  height:max(10px,0.57vw)
}

.ss-lead2-lbl-a,.ss-lead2-lbl-b {
  position:absolute;
  top:var(--w2-s8);
  font:500 12px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  letter-spacing:.04em;
  color:var(--text-dim);
  white-space:nowrap;
}

.ss-lead2-lbl-a {
  left:var(--w2-s3);
  transform:translateX(-50%);
  color:var(--green)
}

.ss-lead2-lbl-b {
  right:var(--w2-s3);
  transform:translateX(50%)
}

.ss-lead2-ctrl {
  display:flex;
  align-items:center;
  gap:var(--w2-s2);
  padding:var(--w2-s1) var(--w2-s2);
  border:1px solid var(--border);
  border-radius:var(--w2-s2);
  background:#16181A;
  flex-shrink:0;
  white-space:nowrap;
  justify-self:end;
}

@media (max-width:900px) {
  .ss-lead2 {
    grid-template-columns:1fr;
    row-gap:var(--w2-s3)
  }

  .ss-lead2-track,
  .ss-lead2-fill {
    left:var(--w2-s9);
    right:var(--w2-s9)
  }

  .ss-lead2-dot-a,
  .ss-lead2-lbl-a {
    left:var(--w2-s9)
  }

  .ss-lead2-dot-b,
  .ss-lead2-lbl-b {
    right:var(--w2-s9)
  }

  .ss-lead2-ctrl {
    justify-self:start
  }

  .ss-notif-grid {
    grid-template-columns:1fr
  }

}

/* Info box */
.info {
  display:flex;
  gap:var(--w2-s3);
  padding:var(--w2-s3) var(--w2-s4);
  background:var(--green-ghost);
  border:1px solid var(--green-soft);
  border-radius:var(--w2-s3);
  font:400 12px/1.5 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  color:var(--text-mute);
}

.info .info-icon {
  color:var(--green);
  flex-shrink:0;
  font-weight:700
}

.info.warn {
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.25)
}

.info.warn .info-icon {
  color:var(--amber)
}

.info.danger {
  background:rgba(241,70,44,.06);
  border-color:rgba(241,70,44,.22)
}

.info.danger .info-icon {
  color:var(--error)
}

/* Kpi */
.kpi-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(6.8vw,1fr));
  gap:var(--w2-s3);
  margin-bottom:var(--w2-s4)
}

.kpi {
  padding:var(--w2-s3) var(--w2-s4);
  border:1px solid var(--border);
  border-radius:var(--w2-s3);
  background:var(--surface-el)
}

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

.kpi .v {
  font:700 16px/1 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  color:var(--text);
  margin-top:var(--w2-s2);
  letter-spacing:-.01em
}

.kpi .v.green {
  color:var(--green)
}

/* List items (dishes, exercises etc) */
.item-list {
  display:flex;
  flex-direction:column;
  gap:var(--w2-s2)
}

.item-row {
  display:grid;
  grid-template-columns:max(26px,1.5vw) 1fr auto auto;
  gap:var(--w2-s3);
  align-items:center;
  padding:var(--w2-s3) var(--w2-s3);
  background:var(--surface-el);
  border:1px solid var(--border);
  border-radius:var(--w2-s3);
  transition: color .12s, background-color .12s, border-color .12s, box-shadow .12s, transform .12s, opacity .12s;
}

.item-row:hover {
  border-color:var(--border-hi);
  background:var(--surface-hi)
}

.item-row .dot {
  width:max(10px,0.52vw);
  height:max(10px,0.52vw);
  border-radius:50%;
  margin-left:var(--w2-s2)
}

.item-row .name {
  font:600 14px/1.3 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  color:var(--text)
}

.item-row .meta {
  font:500 12px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  color:var(--text-dim);
  letter-spacing:.04em
}

.item-row .actions {
  display:flex;
  gap:var(--w2-s2)
}

.item-row .icon-btn {
  width:max(27px,1.6vw);
  height:max(27px,1.6vw);
  border-radius:var(--w2-s2);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-dim);
  border:1px solid transparent;
  transition: color .14s, background-color .14s, border-color .14s, box-shadow .14s, transform .14s, opacity .14s;
}

.item-row .icon-btn:hover {
  border-color:var(--border-hi);
  color:var(--text)
}

.item-row .icon-btn.danger:hover {
  border-color:rgba(241,70,44,.4);
  color:var(--error)
}

.item-row .icon-btn svg {
  width:max(12px,0.73vw);
  height:max(12px,0.73vw);
  stroke:currentColor;
  stroke-width:2;
  fill:none
}

/* Sound list */
.sound-row {
  display:grid;
  grid-template-columns:max(29px,1.7vw) 1fr 9.4vw auto;
  gap:var(--w2-s3);
  align-items:center;
  padding:var(--w2-s3) var(--w2-s3);
  background:var(--surface-el);
  border:1px solid var(--border);
  border-radius:var(--w2-s3);
  margin-bottom:var(--w2-s2)
}

.sound-row .play {
  width:max(27px,1.6vw);
  height:max(27px,1.6vw);
  border-radius:var(--w2-s2);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--green);
  border:1px solid var(--border)
}

.sound-row .play:hover {
  background:var(--green-ghost);
  border-color:var(--green)
}

/* Programs editor */
.prog-editor {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--w2-s3);
  padding:var(--w2-s5);
  background:var(--surface-el);
  border:1px solid var(--border);
  border-radius:var(--w2-s3)
}

.prog-day {
  padding:var(--w2-s3);
  border:1px solid var(--border);
  border-radius:var(--w2-s3);
  background:var(--surface);
  border-left:.16vw solid var(--green)
}

.prog-day-title {
  font:600 12px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--green);
  margin-bottom:var(--w2-s3)
}

.prog-day-ex {
  display:grid;
  grid-template-columns:max(21px,1.25vw) 1fr 4.2vw 4.2vw max(29px,1.7vw);
  gap:var(--w2-s2);
  align-items:center;
  padding:var(--w2-s2) 0;
  border-bottom:1px dashed var(--border)
}

.prog-day-ex:last-child {
  border-bottom:0
}

.prog-day-ex input {
  background:transparent;
  border:0;
  color:var(--text);
  font:500 12px/1.2 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  padding:var(--w2-s1) var(--w2-s2);
  border-radius:var(--w2-s1)
}

.prog-day-ex input:focus {
  outline:0;
  background:var(--surface-hi)
}

.prog-day-ex .ex-num {
  font:600 12px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  color:var(--text-dim);
  text-align:center
}

.prog-day-ex .ex-sets,.prog-day-ex .ex-reps {
  text-align:center;
  font-family:'JetBrains Mono',monospace;
  font-weight:600;
  color:var(--green)
}