/* Viltra Training — Plan styles */
.sf-info-row {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 12px; color: var(--muted); line-height: 1.55;
}
.sf-info-row strong { color: var(--text); font-weight: 700; }
.sf-info-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
/* ── Setup Form (SF) ── */
.sf-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 16px; padding: 20px 22px;
}
.sf-label {
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted2); margin-bottom: 12px;
}
.sf-grid4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.sf-grid3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.sf-grid2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 7px; }
.sf-btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 8px; border-radius: 10px;
  background: var(--bg3); border: 1px solid var(--border);
  font-family: var(--display); font-size: 13px; font-weight: 700; color: var(--muted);
  cursor: pointer; transition: all 120ms; line-height: 1.2;
}
.sf-btn span { font-size: 10px; font-weight: 500; color: var(--muted2); font-family: var(--sans); }
.sf-btn:hover { border-color: var(--border2); color: var(--text); background: var(--bg4); }
.sf-btn.sf-on {
  background: linear-gradient(135deg, rgba(99,102,241,0.22), rgba(167,139,250,0.12));
  border-color: rgba(167,139,250,0.55); color: var(--violet2);
  box-shadow: 0 0 12px rgba(167,139,250,0.15);
}
.sf-btn.sf-on span { color: var(--violet); }
.sf-spinner {
  display: flex; align-items: center;
  background: var(--bg3); border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
}
.sf-spin-btn {
  background: none; border: none; color: var(--muted);
  padding: 10px 14px; cursor: pointer; font-size: 18px; font-weight: 700;
  transition: color 120ms; line-height: 1;
}
.sf-spin-btn:hover { color: var(--violet2); }
.sf-spin-val {
  display: flex; align-items: baseline; gap: 3px; padding: 6px 10px; min-width: 56px; justify-content: center;
}
.sf-spin-val b { font-family: var(--display); font-size: 26px; font-weight: 800; color: var(--text); line-height: 1; }
.sf-spin-val small { font-size: 10px; color: var(--muted2); font-weight: 700; }
.sf-scope {
  padding: 6px 14px; border-radius: 8px; font-size: 12px; font-weight: 700;
  background: var(--bg3); border: 1px solid var(--border); color: var(--muted);
  cursor: pointer; transition: all 120ms; flex: 1; text-align: center;
}
.sf-scope.sf-scope-on {
  background: rgba(193,2,48,0.15); border-color: rgba(193,2,48,0.4); color: #ff6680;
}
.sf-generate {
  width: 100%; padding: 15px; border-radius: 14px; border: none;
  background: linear-gradient(135deg, #ff7a00, #e05000);
  font-family: var(--display); font-size: 16px; font-weight: 800; color: #fff;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 4px 20px rgba(255,122,0,0.3); transition: transform 130ms, box-shadow 130ms;
}
.sf-generate:hover { transform: translateY(-1px); box-shadow: 0 8px 28px rgba(255,122,0,0.42); }
.sf-generate:active { transform: scale(0.98); }
/* Energy preview */
.sf-stat-row { display: grid; grid-template-columns: repeat(2,1fr); gap: 7px; margin-bottom: 12px; }
.sf-stat { background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.sf-stat-val { font-family: var(--display); font-size: 20px; font-weight: 800; color: var(--text); }
.sf-stat-lbl { font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted2); margin-top: 3px; }
.sf-prod { display: flex; align-items: flex-start; gap: 8px; padding: 8px 0; border-bottom: 1px solid rgba(150,160,255,0.08); }
.sf-prod:last-child { border-bottom: none; padding-bottom: 0; }
.sf-prod-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.sf-prod-name { font-size: 12px; font-weight: 700; color: var(--text); }
.sf-prod-qty { font-size: 12px; color: var(--violet2); font-weight: 700; margin-left: 5px; }
.sf-prod-tip { font-size: 11px; color: var(--muted2); line-height: 1.4; margin-top: 1px; }
.plan-vol-btn {
  padding: 8px 4px; border: 0.5px solid rgba(120,130,220,0.2); border-radius: 8px;
  background: rgba(28,32,58,0.6); color: var(--muted); font-size: 12px; font-weight: 700;
  cursor: pointer; transition: all 150ms; text-align: center;
}
.plan-vol-btn:hover { border-color: rgba(120,130,220,0.5); color: var(--text); }
.plan-vol-btn.active { background: rgba(99,102,241,0.18); border-color: rgba(99,102,241,0.5); color: var(--violet2); }
/* Umara/Energi CSS removed */
.plan-week-btn {
flex: 1; padding: 10px 14px; border-radius: 10px;
border: 1.5px solid rgba(120,130,220,0.2);
background: rgba(28,32,58,0.78);
color: var(--muted2); font-family: var(--sans);
font-size: 13px; font-weight: 700; cursor: pointer;
transition: all 180ms ease; text-align: center;
position: relative; overflow: hidden;
}
.plan-week-btn:hover:not(.active) {
background: rgba(99,102,241,0.12);
border-color: rgba(99,102,241,0.4);
color: var(--text);
transform: translateY(-1px);
}
.plan-week-btn.active {
background: linear-gradient(135deg, var(--accent) 0%, var(--violet) 100%);
border-color: transparent;
color: #fff;
box-shadow: 0 4px 20px rgba(99,102,241,0.45), 0 2px 8px rgba(255,122,0,0.3);
transform: translateY(-1px);
}
.plan-week-btn.active::after {
content: '✓';
position: absolute; top: 3px; right: 5px;
font-size: 9px; opacity: 0.8;
}
.plan-week-tab {
padding: 7px 16px; border-radius: 999px; border: 1px solid var(--border2);
background: rgba(255,255,255,0.04); color: var(--muted); font-size: 12px; font-weight: 700;
cursor: pointer; transition: all 140ms ease; white-space: nowrap;
}
.plan-week-tab:hover:not(.active) { background: rgba(99,102,241,0.1); color: var(--text); }
.plan-week-tab.active { background: rgba(99,102,241,0.18); border-color: rgba(99,102,241,0.4); color: var(--violet2); }
.plan-day {
background: rgba(255,255,255,0.03); border: 1px solid var(--border);
border-radius: 14px; padding: 14px 18px; margin-bottom: 10px;
transition: border-color 150ms;
}
.plan-day:hover { border-color: var(--border2); }
.plan-day-header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.plan-day-name { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted2); min-width: 40px; }
.plan-day-type { font-size: 14px; font-weight: 700; color: var(--text); }
.plan-day-badge {
margin-left: auto; font-size: 11px; font-weight: 700; padding: 3px 9px;
border-radius: 999px; white-space: nowrap;
}
.badge-easy { background: rgba(52,211,153,0.12); color: #6ee7b7; border: 1px solid rgba(52,211,153,0.2); }
.badge-medium { background: rgba(251,191,36,0.12); color: #fcd34d; border: 1px solid rgba(251,191,36,0.2); }
.badge-hard { background: rgba(248,113,113,0.12); color: #fca5a5; border: 1px solid rgba(248,113,113,0.2); }
.badge-rest { background: rgba(99,102,241,0.1); color: var(--muted); border: 1px solid rgba(99,102,241,0.15); }
.plan-day-desc { font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.plan-day-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.plan-meta-chip { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 6px; background: rgba(99,102,241,0.08); border: 1px solid rgba(99,102,241,0.15); color: var(--muted); }
.plan-week-summary {
background: rgba(99,102,241,0.07); border: 1px solid rgba(99,102,241,0.18);
border-radius: 14px; padding: 14px 18px; margin-bottom: 16px;
display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
}
.plan-week-stat { display: flex; flex-direction: column; gap: 2px; }
.plan-week-stat-label { font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted2); }
.plan-week-stat-value { font-family: var(--display); font-size: 15px; font-weight: 800; color: var(--text); }
.plan-week-theme { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--violet2); font-style: italic; }
.plan-day {
position: relative;
transition: border-color 150ms, opacity 150ms, box-shadow 150ms;
}
.plan-day.is-future {
opacity: 0.45;
filter: saturate(0.6);
}
.plan-day.is-future:hover {
opacity: 0.75;
filter: saturate(1);
}
.plan-day.is-past:not(.is-done) {
opacity: 0.6;
}
.plan-day.is-today {
border-color: #ff5c1a !important;
background: linear-gradient(135deg, rgba(255,92,26,0.20) 0%, rgba(255,140,82,0.10) 100%) !important;
box-shadow: 0 0 0 1px rgba(255,92,26,0.45), 0 8px 32px rgba(255,92,26,0.25);
}
.plan-day.is-today .plan-day-name { color: #ff7a42 !important; }
.plan-day.is-today .plan-day-type { color: #ffffff !important; }
.plan-day.is-today .plan-day-desc { color: rgba(255,255,255,0.78) !important; }
.plan-day.is-race {
border-color: rgba(249,115,22,0.6) !important;
background: linear-gradient(135deg, rgba(249,115,22,0.1) 0%, rgba(251,146,60,0.05) 100%) !important;
box-shadow: 0 0 0 1px rgba(249,115,22,0.3), 0 6px 28px rgba(249,115,22,0.15);
}
.plan-day.is-race .plan-day-name { color: #fb923c; }
.plan-day.is-done {
opacity: 0.5;
background: rgba(52,211,153,0.04) !important;
border-color: rgba(52,211,153,0.2) !important;
box-shadow: none !important;
}
.plan-day.is-done .plan-day-type { text-decoration: line-through; color: var(--muted2); }
.plan-done-btn {
margin-left: auto;
padding: 5px 12px; border-radius: 8px; font-size: 11px; font-weight: 700;
border: 1.5px solid rgba(52,211,153,0.3); background: transparent;
color: var(--muted2); cursor: pointer; transition: all 150ms ease;
white-space: nowrap; flex-shrink: 0;
}
.plan-done-btn:hover { background: rgba(52,211,153,0.1); border-color: rgba(52,211,153,0.5); color: #6ee7b7; }
/* Umara nutrition CSS removed */
.race-nutrition-card {
background: linear-gradient(135deg, rgba(255,122,0,0.1), rgba(99,102,241,0.08));
border: 1px solid rgba(255,122,0,0.3); border-radius: 16px;
padding: 20px; margin-top: 20px;
}
.race-nutrition-title {
font-family: var(--display); font-size: 15px; font-weight: 800; color: var(--text);
margin-bottom: 4px; display:flex; align-items:center; gap:8px;
}
.race-nutrition-sub { font-size: 12px; color: var(--muted); margin-bottom: 16px; }
.race-nutrition-timeline { display: grid; gap: 10px; }
.plan-done-btn.done { background: rgba(52,211,153,0.12); border-color: rgba(52,211,153,0.4); color: #6ee7b7; }
.today-badge {
display:inline-flex; align-items:center;
padding: 3px 9px; border-radius:6px; font-size:9px; font-weight:900;
letter-spacing:0.12em; text-transform:uppercase;
background: #ff5c1a; color: #fff;
}
.plan-spinner {
width: 44px; height: 44px; border-radius: 50%;
border: 3px solid rgba(99,102,241,0.15);
border-top-color: var(--violet);
animation: spin 0.9s linear infinite;
margin: 0 auto;
}
/* ── Custom Plan Builder ─────────────────────────────────────── */
.cp-lib-chip { transition: opacity .12s, transform .12s; }
.cp-lib-chip:hover { opacity: .85; transform: translateX(2px); }
.cp-day-col { transition: border-color .15s, background .15s; }
#cpPassModal { box-sizing: border-box; }