*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
:root{
  --acc:#F97316;--acc2:#EA580C;--acc-dim:rgba(249,115,22,0.15);
  --bg:#0a0a0a;--card:rgba(20,20,20,0.92);--card2:#1a1a1a;
  --bord:rgba(255,255,255,0.08);--bord2:rgba(249,115,22,0.25);
  --mut:#6b7280;--txt:#f9fafb;--sub:#9ca3af;
  --green:#22C55E;--red:#EF4444;--blue:#3B82F6;
}
body{background:var(--bg);color:var(--txt);font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;min-height:100vh;overflow-x:hidden;}
button{cursor:pointer;outline:none;border:none;font-family:inherit;transition:all 0.15s;}
button:active{transform:scale(0.95);}
input,select{font-family:inherit;}
input::-webkit-inner-spin-button{opacity:0.4;}

@keyframes pop{0%{transform:scale(1)}55%{transform:scale(1.08)}80%{transform:scale(0.97)}100%{transform:scale(1)}}
.popped{animation:pop 0.35s cubic-bezier(0.34,1.56,0.64,1);}
@keyframes fadeSlide{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.fade{animation:fadeSlide 0.3s ease-out;}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.spin{animation:spin 1s linear infinite;display:inline-block;}
@keyframes check{0%{transform:scale(0)}60%{transform:scale(1.2)}100%{transform:scale(1)}}
.checked-anim{animation:check 0.3s cubic-bezier(0.34,1.56,0.64,1);}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:2px;}

/* ─── SPORT CARD ─── */
.sp-card{
  background:var(--card);
  border:1px solid var(--bord);
  border-radius:16px;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.sp-card-accent{border-color:var(--bord2);}
.sp-btn-primary{
  width:100%;background:var(--acc);color:#fff;
  font-weight:700;font-size:14px;padding:14px;border-radius:12px;
  letter-spacing:0.3px;border:none;cursor:pointer;
  transition:all 0.2s;
}
.sp-btn-primary:hover{background:var(--acc2);}
.sp-btn-ghost{
  background:rgba(255,255,255,0.06);color:var(--sub);
  font-weight:600;font-size:13px;padding:12px;border-radius:10px;
  border:1px solid var(--bord);cursor:pointer;
}
.sp-label{font-size:10px;color:var(--mut);font-weight:600;letter-spacing:1px;text-transform:uppercase;margin-bottom:6px;}
.sp-tag{font-size:11px;padding:3px 8px;border-radius:20px;font-weight:600;}
.sp-divider{height:1px;background:var(--bord);margin:12px 0;}
.sp-check{
  width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:all 0.2s;
}

/* ─── BOTTOM NAV ─── */
#sp-bottom-nav{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:500px;
  background:rgba(10,10,10,0.96);
  border-top:1px solid rgba(255,255,255,0.06);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  display:flex;z-index:200;padding-bottom:env(safe-area-inset-bottom,0);
}
.sp-nav-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:10px 0;background:none;border:none;cursor:pointer;
  color:var(--mut);font-size:9px;font-weight:600;letter-spacing:0.5px;
  transition:color 0.2s;position:relative;
}
.sp-nav-btn.active{color:var(--acc);}
.sp-nav-btn svg{width:22px;height:22px;}
.sp-nav-badge{
  position:absolute;top:6px;right:calc(50% - 20px);
  width:8px;height:8px;border-radius:50%;background:var(--red);
  border:2px solid var(--bg);display:none;
}

/* ─── GYM BG HEADER ─── */
.sp-hero{
  position:relative;width:100%;height:180px;
  background-image:url(https://images.unsplash.com/photo-1517836357463-d25dfeac3438?w=600&q=80);
  background-size:cover;background-position:center 30%;
  border-radius:0 0 20px 20px;overflow:hidden;flex-shrink:0;
}
.sp-hero::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(10,10,10,0.3) 0%,rgba(10,10,10,0.85) 100%);
}
.sp-hero-content{position:absolute;bottom:0;left:0;right:0;padding:16px;z-index:1;}

/* ─── MOBILE RESPONSIVE ─── */
@media(max-width:768px){
  html,body{overflow-x:hidden!important;}
  [style*="grid-template-columns"]{grid-template-columns:1fr!important;}
  img,video{max-width:100%!important;height:auto!important;}
}


/* === */


#vc-login-banner {
  position: fixed !important;top: 0 !important;left: 0 !important;right: 0 !important;
  z-index: 999999 !important;
  background: rgba(249,115,22,0.12);
  border-bottom: 1px solid rgba(249,115,22,0.3);
  padding: 14px 20px;text-align: center;display: none;
  font-family: 'Inter',-apple-system,sans-serif;
  backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px);
}
#vc-login-banner span {color: #f9fafb;font-size: 14px;margin-right: 14px;font-weight: 600;}
#vc-login-banner button {
  background: #F97316;color: #fff;border: none;
  padding: 9px 22px;border-radius: 20px;font-weight: 700;font-size: 13px;
  cursor: pointer;font-family: inherit;transition: background 0.2s;
}
#vc-login-banner button:hover {background: #EA580C;}
@media (max-width: 600px) {
  #vc-login-banner span {display: block;margin: 0 0 10px;}
  #vc-login-banner {padding: 14px;}
}

#vc-login-modal {
  position: fixed;inset: 0;background: rgba(0,0,0,0.88);z-index: 9999999;
  display: none;align-items: center;justify-content: center;padding: 20px;
  font-family: 'Inter',-apple-system,sans-serif;backdrop-filter: blur(12px);
}
#vc-login-modal .vc-card {
  background: #141414;border: 1px solid rgba(255,255,255,0.08);border-radius: 22px;
  padding: 28px 24px;max-width: 360px;width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
#vc-login-modal h2 {color: #F97316;font-size: 11px;font-weight: 700;letter-spacing: 1px;margin: 0 0 6px;text-align: left;}
#vc-login-modal h3 {color: #f9fafb;font-size: 20px;font-weight: 800;margin: 0 0 22px;}
#vc-login-modal label {display: block;color: #6b7280;font-size: 11px;letter-spacing: 0.5px;margin: 14px 0 6px;font-weight: 600;}
#vc-login-modal input {
  width: 100%;background: #0f0f0f;border: 1px solid rgba(255,255,255,0.1);border-radius: 12px;
  padding: 13px 14px;color: #f9fafb;font-size: 14px;box-sizing: border-box;
  font-family: inherit;transition: border-color 0.2s;
}
#vc-login-modal input:focus {outline: none;border-color: #F97316;}
#vc-login-modal .vc-error {color: #EF4444;font-size: 12px;margin-top: 12px;text-align: center;min-height: 16px;font-weight: 600;}
#vc-login-modal .vc-success {color: #22C55E;font-size: 13px;margin-top: 18px;text-align: center;min-height: 16px;font-weight: 700;line-height: 1.5;}
#vc-login-modal .vc-btn-primary {
  width: 100%;margin-top: 18px;background: #F97316;border: none;color: #fff;
  padding: 14px;border-radius: 12px;font-weight: 800;font-size: 14px;
  cursor: pointer;font-family: inherit;transition: background 0.2s;
}
#vc-login-modal .vc-btn-primary:hover {background: #EA580C;}
#vc-login-modal .vc-btn-primary:disabled {opacity: 0.5;cursor: wait;}
#vc-login-modal .vc-btn-cancel {
  width: 100%;margin-top: 10px;background: transparent;border: 1px solid rgba(255,255,255,0.1);
  color: #6b7280;padding: 11px;border-radius: 12px;font-weight: 600;font-size: 13px;
  cursor: pointer;font-family: inherit;
}
#vc-login-modal .vc-btn-cancel:hover {color: #f9fafb;border-color: rgba(255,255,255,0.25);}


/* === */


#vc-real-habits {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9998;
  background: linear-gradient(135deg, #161616 0%, #0f0f0f 100%);
  border: 2px solid #F97316;
  border-radius: 18px;
  padding: 18px 20px;
  width: calc(100% - 40px);
  max-width: 420px;
  display: none;
  font-family: system-ui, -apple-system, sans-serif;
  box-shadow: 0 10px 40px rgba(249,115,22,0.35);
}
#vc-real-habits .vc-rh-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
#vc-real-habits h3 {
  color: #F97316; margin: 0; font-size: 13px; font-weight: 900;
  letter-spacing: 1.5px;
}
#vc-real-habits .vc-rh-close {
  background: transparent; border: 1px solid #ffffff20; color: #888;
  width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
  font-size: 16px; line-height: 1; padding: 0;
}
#vc-real-habits .vc-rh-list { display: grid; gap: 8px; }
#vc-real-habits .vc-rh-item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; background: #1a1a1a;
  border: 1px solid #F9731620; border-radius: 12px;
  cursor: pointer; transition: all 0.2s;
  user-select: none;
}
#vc-real-habits .vc-rh-item:hover { background: #1f1f1f; border-color: #F9731655; }
#vc-real-habits .vc-rh-item.done {
  background: linear-gradient(135deg, #F9731630, #F9731615);
  border-color: #F97316;
}
#vc-real-habits .vc-rh-icon {
  font-size: 22px; width: 32px; text-align: center;
}
#vc-real-habits .vc-rh-label {
  flex: 1; color: #fff; font-size: 13px; font-weight: 600;
}
#vc-real-habits .vc-rh-check {
  width: 24px; height: 24px; border: 2px solid #ffffff30;
  border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 14px; color: #000;
  font-weight: 900; transition: all 0.2s;
}
#vc-real-habits .vc-rh-item.done .vc-rh-check {
  background: #F97316; border-color: #F97316;
}
#vc-real-habits .vc-rh-item.done .vc-rh-check::after { content: "✓"; }
#vc-real-habits .vc-rh-counter {
  color: #F97316; font-size: 11px; font-weight: 700;
  letter-spacing: 1px;
}
#vc-real-habits .vc-rh-loading {
  text-align: center; color: #888; padding: 20px;
  font-size: 12px; letter-spacing: 1px;
}

#vc-habits-toggle-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9997;
  background: #F97316;
  color: #000;
  border: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  display: none;
  box-shadow: 0 4px 20px rgba(249,115,22,0.4);
  transition: transform 0.2s;
  font-family: system-ui;
}
#vc-habits-toggle-btn:hover { transform: scale(1.08); }
#vc-habits-toggle-btn::after {
  content: '';
  position: absolute;
  top: -4px; right: -4px;
  background: #ff4444;
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 900;
  display: var(--vc-badge-display, none);
  min-width: 14px;
  line-height: 1;
}