/* Sport & Plan Styles */
.sp-tabs { display:flex; gap:8px; margin-bottom:16px; }
.sp-tab { padding:8px 18px; border-radius:20px; cursor:pointer; background:#F5F0E8; color:#4A3728; font-weight:500; font-size:0.85rem; border:1px solid #E8DFD0; transition:all 0.2s; }
.sp-tab.active { background:#8B6F4E; color:#fff; border-color:#8B6F4E; }
.sp-tab:hover:not(.active) { border-color:#C4A882; }

/* Sport cards */
.sp-card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; }
.sp-sport-card { background:#fff; border:1px solid #E8DFD0; border-radius:18px; padding:16px 10px; text-align:center; cursor:pointer; transition:all 0.25s; position:relative; }
.sp-sport-card:hover { transform:translateY(-3px); border-color:#8B6F4E; box-shadow:0 6px 20px rgba(139,111,78,0.12); }
.sp-sport-icon { width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin:0 auto 8px; }
.sp-sport-name { font-weight:600; font-size:0.9rem; color:#4A3728; margin-bottom:2px; }
.sp-sport-rate { font-size:0.7rem; color:#8C7B6B; }

/* Plan cards */
.sp-plan-list { display:flex; flex-direction:column; gap:10px; }
.sp-plan-card { background:#fff; border-radius:16px; border:1px solid #E8DFD0; padding:14px; display:flex; align-items:center; gap:12px; cursor:pointer; transition:all 0.25s; }
.sp-plan-card:hover { border-color:#8B6F4E; box-shadow:0 4px 14px rgba(139,111,78,0.1); transform:translateY(-1px); }
.sp-plan-icon { width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; }
.sp-plan-info { flex:1; min-width:0; }
.sp-plan-name { font-weight:600; font-size:0.92rem; color:#4A3728; }
.sp-plan-desc { font-size:0.73rem; color:#8C7B6B; margin-top:2px; }
.sp-plan-arrow { color:#C4A882; font-size:1rem; }

/* Timer */
.sp-timer-hero { text-align:center; padding:16px 0; }
.sp-timer { font-family:'Courier New',monospace; font-size:3.2rem; font-weight:700; letter-spacing:2px; color:#4A3728; }
.sp-timer.sp-pulse { animation:spPulse 1s ease infinite; }
@keyframes spPulse { 0%,100%{opacity:1;} 50%{opacity:0.6;} }

.sp-presets { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:8px 0; }
.sp-preset { padding:6px 16px; border-radius:18px; font-size:0.75rem; cursor:pointer; background:#F5F0E8; color:#4A3728; border:1px solid #C4A882; transition:all 0.2s; }
.sp-preset:hover,.sp-preset.active { background:#8B6F4E; color:#fff; border-color:#8B6F4E; }

.sp-timer-ctrls { display:flex; gap:14px; justify-content:center; margin:12px 0; }
.sp-btn-circle { width:46px; height:46px; border-radius:50%; border:2px solid #8B6F4E; background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:1rem; color:#4A3728; transition:all 0.2s; }
.sp-btn-circle:hover { background:#8B6F4E; color:#fff; }
.sp-btn-play { width:60px; height:60px; background:#8B6F4E; color:#fff; border:none; font-size:1.3rem; }
.sp-btn-play:hover { background:#A0785A; }

/* Step dots */
.sp-dots { display:flex; gap:6px; justify-content:center; margin:10px 0; flex-wrap:wrap; }
.sp-dot { width:10px; height:10px; border-radius:50%; background:#E8DFD0; transition:all 0.3s; }
.sp-dot.active { background:#8B6F4E; transform:scale(1.4); }
.sp-dot.done { background:#C4A882; }

.sp-step-box { padding:14px; background:#FDF9F3; border-radius:14px; border:1px solid #E8DFD0; margin:8px 0; line-height:1.7; font-size:0.88rem; color:#4A3728; }
.sp-step-nav { display:flex; gap:10px; margin:8px 0; }

/* Records */
.sp-rec-title { font-weight:600; color:#4A3728; margin-bottom:6px; font-size:0.85rem; }
.sp-rec-item { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid #E8DFD0; }
.sp-rec-item:last-child { border:none; }
.sp-rec-icon { width:32px; height:32px; border-radius:50%; background:#F5F0E8; display:flex; align-items:center; justify-content:center; font-size:0.85rem; }
.sp-rec-info { flex:1; }
.sp-rec-name { font-weight:600; font-size:0.82rem; color:#4A3728; }
.sp-rec-time { font-size:0.68rem; color:#8C7B6B; }
.sp-rec-kcal { font-weight:600; color:#C75C3A; font-size:0.82rem; }