/* ===========================================================
   500K Step Challenge — Edition 5.0 — "In Bapu's Path"
   Design tokens — Dark glow / dashboard theme
   =========================================================== */
:root{
  --bg-deep:      #F5F7FC;
  --bg-navy:      #EEF2FB;
  --bg-navy-2:    #E4EAF9;
  --card-line:    rgba(20,30,70,0.08);
  --ink:          #1B2440;
  --ink-dim:      #5B6685;
  --ink-faint:    #8C97B6;

  --blue:         #1E5FD9;
  --blue-soft:    #4C8CFF;
  --blue-deep:    #16337A;
  --purple:       #7B2FF7;
  --saffron:      #FF7A3D;
  --coral:        #FF4D6D;
  --maroon:       #E8A23C;
  --leaf:         #1FA463;

  --hero-grad: linear-gradient(135deg, #1E5FD9 0%, #4C3ED9 45%, #7B2FF7 100%);
  --cta-grad: linear-gradient(135deg, var(--saffron), var(--coral));

  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body:    'Inter', -apple-system, Segoe UI, sans-serif;

  --radius: 18px;
  --radius-sm: 12px;
  --glow-blue: 0 0 0 1px rgba(30,95,217,0.12), 0 20px 50px rgba(20,30,70,0.12), 0 0 40px rgba(30,95,217,0.08);
  --shadow: 0 16px 40px rgba(20,30,70,0.10);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg-deep);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img{max-width:100%; display:block;}
a{color: var(--blue); text-decoration:none;}
a:hover{color: var(--purple);}
::selection{background: var(--blue); color:#fff;}

h1,h2,h3,h4,.font-display{
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
h1{font-weight:700;}
p{max-width: 68ch; color: var(--ink-dim);}
.container-narrow{max-width: 900px; margin:0 auto;}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 3px solid var(--saffron);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

/* ---------- Topbar & Navbar ---------- */
.topbar{
  background: #fff;
  color: var(--ink-dim);
  font-size: 0.85rem;
  border-bottom: 1px solid var(--card-line);
}
.topbar a{color: var(--ink-dim);}
.topbar a:hover{color: var(--blue);}

.navbar-brand-wrap{display:flex; align-items:center; gap:0.65rem;}
.navbar-brand-wrap img{
  height:56px; width:auto;
  border-radius: 10px;
  filter: drop-shadow(0 4px 14px rgba(30,95,217,0.2));
}
.navbar-brand-text{
  font-family: var(--font-display);
  font-weight:700;
  color: var(--ink);
  line-height:1.05;
  font-size:1.05rem;
}
.navbar-brand-text span{
  display:block;
  font-family: var(--font-body);
  font-weight:600;
  font-size:0.65rem;
  letter-spacing:0.08em;
  color: var(--saffron);
}
.site-navbar{
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--card-line);
}
.site-navbar .nav-link{
  color: var(--ink-dim);
  font-weight:600;
  font-size:0.94rem;
  margin: 0 0.35rem;
  padding: 0.5rem 0.4rem !important;
  border-bottom: 2px solid transparent;
}
.site-navbar .nav-link:hover,
.site-navbar .nav-link.active{
  color: var(--ink);
  border-bottom-color: var(--blue);
}
.navbar-toggler{border-color: var(--card-line);}
.navbar-toggler-icon{filter: none;}
.btn-register{
  background: var(--cta-grad);
  box-shadow: 0 8px 24px rgba(255,77,109,0.3);
  color:#fff;
  font-weight:700;
  padding: 0.55rem 1.35rem;
  border-radius: 999px;
  border: none;
}
.btn-register:hover{filter:brightness(1.06); color:#fff;}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding: 5rem 0 5.5rem;
  background: var(--hero-grad);
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.35) 1px, transparent 1px),
                     radial-gradient(1px 1px at 80% 20%, rgba(255,255,255,0.3) 1px, transparent 1px),
                     radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,0.25) 1px, transparent 1px);
  background-size: 220px 220px;
  pointer-events:none;
  z-index:0;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background-image: url('../images/gandhi-march.png');
  background-repeat:no-repeat;
  background-position: center center;
  background-size: contain;
  opacity:0.10;
  pointer-events:none;
  z-index:0;
}
.hero .container{position:relative; z-index:1;}
.hero-eyebrow{
  color: #FFD9A8;
  font-weight:700;
  font-size:0.95rem;
  letter-spacing:0.03em;
  text-transform:uppercase;
}
.hero h1{
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height:1.05;
  margin: 0.35rem 0 1rem;
  color:#fff;
}
.hero h1 em{
  font-style: normal;
  background: linear-gradient(135deg, #FFD9A8, var(--saffron));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p.lead{
  color: rgba(255,255,255,0.85);
  font-size:1.15rem;
  max-width: 52ch;
}
.hero-stats{
  display:flex; gap:2.2rem; margin-top:2rem; flex-wrap:wrap;
}
.hero-stats .num{
  font-family: var(--font-display); font-weight:700; font-size:1.9rem; color: #fff;
}
.hero-stats .lbl{font-size:0.85rem; color: rgba(255,255,255,0.7);}

.route-line{position:relative; height:2px; background: rgba(255,255,255,0.3); margin: 2.2rem 0; opacity:0.7;}
.route-line::before, .route-line::after{
  content:""; position:absolute; top:50%; width:10px; height:10px; border-radius:50%;
  background: #fff; transform: translateY(-50%);
  box-shadow: 0 0 12px rgba(255,255,255,0.6);
}
.route-line::before{left:0;}
.route-line::after{right:0;}

.hero-figure{
  position:relative;
  max-width: 420px;
  margin: 0 auto;
}
.hero-figure img{
  filter: drop-shadow(0 25px 45px rgba(10,20,60,0.35));
}

/* ---------- Floating stat band (overlaps hero) ---------- */
.stat-float-wrap{
  margin-top: -4.5rem;
  position: relative;
  z-index: 2;
}
.stat-float{
  background:#fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--card-line);
  padding: 1.8rem 1.5rem;
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1.5rem;
}
.stat-float .item{display:flex; align-items:center; gap:0.9rem;}
.stat-float .ic{
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.2rem; flex-shrink:0;
}
.stat-float .ic.blue{background: linear-gradient(135deg,#4C8CFF,#1E5FD9);}
.stat-float .ic.coral{background: linear-gradient(135deg,#FF7A3D,#FF4D6D);}
.stat-float .ic.leaf{background: linear-gradient(135deg,#3FD68A,#1FA463);}
.stat-float .ic.gold{background: linear-gradient(135deg,#FFC24C,#FF7A3D);}
.stat-float .num{font-family:var(--font-display); font-weight:700; font-size:1.4rem; color:var(--ink); line-height:1.1;}
.stat-float .lbl{font-size:0.8rem; color: var(--ink-dim);}
@media (max-width:767px){
  .stat-float{grid-template-columns: repeat(2,1fr);}
  .stat-float-wrap{margin-top:-3rem;}
}

/* ---------- Date strip (single card, four items) ---------- */
.date-strip{
  background:#fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--card-line);
  padding: 1.8rem 1.5rem;
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1.5rem;
  margin: 2.5rem 0;
}
.date-strip .item{display:flex; align-items:center; gap:0.9rem;}
.date-strip .ic{
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.2rem; flex-shrink:0;
}
.date-strip .ic.blue{background: linear-gradient(135deg,#4C8CFF,#1E5FD9);}
.date-strip .ic.coral{background: linear-gradient(135deg,#FF7A3D,#FF4D6D);}
.date-strip .ic.leaf{background: linear-gradient(135deg,#3FD68A,#1FA463);}
.date-strip .ic.gold{background: linear-gradient(135deg,#FFC24C,#FF7A3D);}
.date-strip .lbl{font-size:0.78rem; color: var(--ink-dim); text-transform:uppercase; letter-spacing:0.02em;}
.date-strip .val{font-family:var(--font-display); font-weight:700; font-size:1rem; color:var(--ink); line-height:1.3; margin-top:0.15rem;}
@media (max-width:767px){
  .date-strip{grid-template-columns: repeat(2,1fr);}
}

/* ---------- Check list (replaces card grid for simple inclusions) ---------- */
.check-list{list-style:none; margin:0 0 1rem; padding:0; display:grid; gap:0.85rem;}
.check-list li{display:flex; align-items:flex-start; gap:0.7rem; color:var(--ink-dim); font-size:1rem;}
.check-list li i{color: var(--blue); font-size:1.1rem; margin-top:0.15rem; flex-shrink:0;}

/* ---------- Event challenge window (start/end) ---------- */
.event-window{
  display:flex; align-items:center; justify-content:center;
  gap: 2rem;
  background:#fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--card-line);
  padding: 1.8rem 1.5rem;
  flex-wrap: wrap;
  text-align:center;
}
.event-window .ew-item{min-width:160px;}
.event-window .ew-tag{font-size:0.78rem; font-weight:700; letter-spacing:0.06em; color: var(--blue); margin-bottom:0.3rem;}
.event-window .ew-date{font-family:var(--font-display); font-weight:700; font-size:1.3rem; color:var(--ink);}
.event-window .ew-day{font-size:0.85rem; color:var(--ink-dim); margin-top:0.15rem;}
.event-window .ew-line{color: var(--card-line); font-size:1.6rem; display:flex; align-items:center;}
@media (max-width:575px){
  .event-window{gap:1rem;}
  .event-window .ew-line{display:none;}
}

/* ---------- Section shell ---------- */
.section{padding: 4.5rem 0;}
.section-alt{background: #fff; border-top:1px solid var(--card-line); border-bottom:1px solid var(--card-line);}
.section-navy{background: var(--hero-grad); color: #fff;}
.section-navy h2{color:#fff;}
.section-navy p{color: rgba(255,255,255,0.8);}

.eyebrow{
  font-weight:700; color: var(--saffron); font-size:0.85rem; margin-bottom:0.4rem;
  letter-spacing:0.03em; text-transform:uppercase;
}
.section-head{max-width: 640px; margin-bottom: 2.6rem;}
.section-head h2{font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom:0.6rem;}

/* ---------- Milestone / route cards ---------- */
.milestones{position:relative;}
.milestone{
  display:flex; gap:1.25rem; padding: 1.4rem 0; border-bottom:1px solid var(--card-line);
}
.milestone:last-child{border-bottom:none;}
.milestone .mk{
  flex:0 0 auto; width:44px; height:44px; border-radius:50%;
  background: var(--bg-navy-2); color: var(--blue);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:700;
  border: 1px solid var(--card-line);
  box-shadow: 0 0 16px rgba(30,95,217,0.12);
}
.milestone h3{font-size:1.15rem; margin-bottom:0.25rem; color:var(--ink);}
.milestone p{margin:0; color: var(--ink-dim);}

/* ---------- Glass / glow cards ---------- */
.card-clean{
  background: #fff;
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  padding: 1.75rem;
  height:100%;
  box-shadow: 0 10px 30px rgba(20,30,70,0.06);
}
.card-clean .ic{
  width:46px; height:46px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, var(--blue-soft), var(--blue-deep));
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:700; margin-bottom:1rem;
  box-shadow: 0 0 18px rgba(30,95,217,0.25);
}
.card-clean .ic.blue{background: linear-gradient(135deg,#4C8CFF,#1E5FD9); box-shadow: 0 0 18px rgba(30,95,217,0.25);}
.card-clean .ic.coral{background: linear-gradient(135deg,#FF7A3D,#FF4D6D); box-shadow: 0 0 18px rgba(255,77,109,0.25);}
.card-clean .ic.leaf{background: linear-gradient(135deg,#3FD68A,#1FA463); box-shadow: 0 0 18px rgba(31,164,99,0.25);}
.card-clean .ic.gold{background: linear-gradient(135deg,#FFC24C,#FF7A3D); box-shadow: 0 0 18px rgba(255,194,76,0.25);}
.card-clean h3{font-size:1.1rem; margin-bottom:0.5rem; color:var(--ink);}
.card-clean p{color: var(--ink-dim); font-size:0.96rem; margin:0;}
.card-clean ul li{color: var(--ink-dim);}

/* ---------- Stats strip ---------- */
.stat-strip{
  display:grid; grid-template-columns: repeat(4,1fr); gap:1.5rem;
  border-top:1px solid rgba(255,255,255,0.25);
  border-bottom:1px solid rgba(255,255,255,0.25);
  padding: 2.2rem 0;
}
.stat-strip .num{font-family:var(--font-display); font-weight:700; font-size:2.4rem; color:#fff;}
.stat-strip .lbl{font-size:0.85rem; color: rgba(255,255,255,0.8);}
@media (max-width:767px){.stat-strip{grid-template-columns: repeat(2,1fr);}}

/* ---------- Gallery ---------- */
.gallery-item{
  position:relative; overflow:hidden; border-radius: var(--radius-sm);
  aspect-ratio: 4/3;
  border: 1px solid var(--card-line);
}
.gallery-item img{width:100%; height:100%; object-fit:cover; transition: transform .35s ease;}
.gallery-item:hover img{transform: scale(1.04);}

.about-figure{
  position:relative; overflow:hidden; border-radius: var(--radius);
  aspect-ratio: 3/4;
  border: 1px solid var(--card-line);
  box-shadow: 0 10px 30px rgba(20,30,70,0.08);
}
.about-figure img{width:100%; height:100%; object-fit:cover; object-position: center top;}
.about-figure--illustration{
  background: linear-gradient(180deg, #F3F6FC, #ffffff);
  display:flex; align-items:center; justify-content:center;
  padding: 1.5rem;
}
.about-figure--illustration img{width:100%; height:100%; object-fit:contain;}

/* ---------- Timeline (event day) ---------- */
.event-table{width:100%; border-collapse:collapse;}
.event-table th, .event-table td{
  padding:0.9rem 1rem; border-bottom:1px solid var(--card-line); text-align:left; color: var(--ink-dim);
}
.event-table th{font-family:var(--font-display); color:#fff; font-size:0.95rem;}

/* ---------- Forms ---------- */
.form-clean label{font-weight:600; font-size:0.9rem; margin-bottom:0.3rem; color: var(--ink);}
.form-clean .form-control, .form-clean .form-select{
  border-radius: 10px;
  border: 1px solid var(--card-line);
  padding: 0.65rem 0.85rem;
  background: rgba(255,255,255,0.03);
  color: var(--ink);
}
.form-clean .form-control::placeholder{color: var(--ink-faint);}
.form-clean .form-control:focus, .form-clean .form-select:focus{
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(46,140,255,0.2);
  background: rgba(255,255,255,0.05);
  color:#fff;
}
.form-clean .form-select option{background: var(--bg-navy); color:#fff;}
.form-check-input{background-color: rgba(255,255,255,0.05); border-color: var(--card-line);}
.form-check-input:checked{background-color: var(--blue); border-color: var(--blue);}
.form-check-label{color: var(--ink-dim);}

.btn-primary-brand{
  background: var(--cta-grad);
  border:none; color:#fff; font-weight:700;
  padding:0.75rem 1.6rem; border-radius: 999px;
  box-shadow: 0 10px 28px rgba(255,77,109,0.3);
}
.btn-primary-brand:hover{filter:brightness(1.06); color:#fff;}
.btn-outline-brand{
  background:transparent; border:1.5px solid rgba(255,255,255,0.5); color:#fff; font-weight:700;
  padding: 0.65rem 1.5rem; border-radius:999px;
}
.btn-outline-brand:hover{background: rgba(255,255,255,0.12); border-color:#fff; color:#fff;}
.section .btn-outline-brand{border-color: var(--card-line); color: var(--ink);}
.section .btn-outline-brand:hover{background: var(--bg-navy); border-color: var(--blue); color: var(--blue);}

/* ---------- CTA band ---------- */
.cta-band{
  background: var(--cta-grad);
  color:#fff;
  padding: 3.2rem 0;
  text-align:center;
}
.cta-band h2{color:#fff; margin-bottom:0.5rem;}
.cta-band p{color: rgba(255,255,255,0.9); margin:0 auto 1.6rem; max-width:60ch;}

/* ---------- Footer ---------- */
.site-footer{background: #10173A; color: var(--ink-dim); padding-top:3.5rem; border-top:1px solid var(--card-line);}
.site-footer h5{color:#fff; font-family:var(--font-display); font-size:1.05rem; margin-bottom:1rem;}
.site-footer a{color: #B7C0E0;}
.site-footer a:hover{color: var(--blue-soft);}
.site-footer .foot-logo{height:46px; margin-bottom:1rem; border-radius:8px;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.1);
  margin-top:2.5rem; padding: 1.25rem 0; font-size:0.85rem; color: #7D89B0;
}
.social-round{
  width:36px; height:36px; border-radius:50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  display:inline-flex; align-items:center; justify-content:center;
  margin-right:0.5rem;
  color:#fff;
}
.social-round:hover{background: var(--blue); border-color: var(--blue);}

/* ---------- Page header for inner pages ---------- */
.page-head{
  background: var(--hero-grad);
  color:#fff;
  padding: 3rem 0 2.2rem;
  border-bottom: 1px solid var(--card-line);
}
.page-head h1{color:#fff; margin-bottom:0.4rem;}
.page-head .crumb{color: rgba(255,255,255,0.75); font-size:0.9rem;}
.page-head .crumb a{color: #fff;}

/* ---------- Utilities ---------- */
.text-leaf{color:var(--leaf);}
.text-maroon{color:var(--saffron);}
.divider-dot{
  width:6px; height:6px; border-radius:50%; background:var(--blue);
  display:inline-block; margin: 0 0.6rem 2px;
  box-shadow: 0 0 8px var(--blue);
}

/* ===========================================================
   Dashboard widgets (app-style panel, for dashboard.php)
   =========================================================== */
.dash-shell{
  max-width: 420px;
  margin: 0 auto;
  display:grid;
  gap: 1rem;
  background: linear-gradient(180deg, #0B1730, #0E1F44 55%, #0B1730);
  border-radius: calc(var(--radius) + 8px);
  border: 1px solid rgba(107,182,255,0.18);
  box-shadow: 0 30px 70px rgba(6,12,30,0.45);
  padding: 1.4rem 1.1rem 1.6rem;
}
.dash-hello{color:#fff; font-family:var(--font-display); font-size:1.3rem; margin-bottom:0.25rem;}

.dash-hero{
  position:relative;
  border-radius: var(--radius);
  padding: 1.5rem;
  background: linear-gradient(145deg, #163B7A, #0E1F44 70%);
  box-shadow: var(--glow-blue);
  overflow:hidden;
  border: 1px solid rgba(107,182,255,0.25);
}
.dash-hero::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(220px 140px at 85% 15%, rgba(107,182,255,0.25), transparent 70%);
  pointer-events:none;
}
.dash-hero .lbl{color: var(--ink-dim); font-size:0.85rem;}
.dash-hero .big{font-family:var(--font-display); font-weight:700; font-size:2.6rem; color:#fff; line-height:1;}
.dash-hero-row{display:flex; align-items:center; justify-content:space-between; gap:1rem;}

.ring{
  --pct: 0.04;
  width: 92px; height: 92px; border-radius:50%;
  background: conic-gradient(var(--blue) calc(var(--pct)*360deg), rgba(255,255,255,0.12) 0);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  position:relative;
}
.ring::before{
  content:""; position:absolute; inset:8px; border-radius:50%;
  background: #0E1F44;
}
.ring .ring-label{position:relative; text-align:center; z-index:1;}
.ring .ring-label b{display:block; font-family:var(--font-display); font-size:1.05rem; color:#fff;}
.ring .ring-label small{font-size:0.62rem; color: var(--ink-dim);}

.dash-steps-track{display:flex; align-items:center; gap:0.4rem; margin-top:1.1rem;}
.dash-steps-track .dot{
  width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.08); color: var(--ink-dim); font-size:0.7rem;
  border: 1px solid var(--card-line);
}
.dash-steps-track .dot.done{background: var(--blue); color:#fff; box-shadow:0 0 10px rgba(46,140,255,0.6);}
.dash-steps-track .dot.current{background: transparent; border:2px solid var(--blue); color:var(--blue-soft);}
.dash-steps-track .line{flex:1; height:2px; background: rgba(255,255,255,0.12);}

.dash-grid{display:grid; grid-template-columns:1fr 1fr; gap:1rem;}
.dash-card{
  border-radius: var(--radius);
  border: 1px solid var(--card-line);
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  padding: 1.1rem;
}
.dash-card .lbl{color: var(--ink-dim); font-size:0.82rem;}
.dash-card .val{color:#fff; font-family:var(--font-display); font-weight:700; font-size:1.4rem; margin:0.15rem 0 0.6rem;}
.dash-ic-round{
  width:44px; height:44px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, var(--blue-soft), var(--blue-deep));
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.1rem;
  box-shadow: 0 0 16px rgba(46,140,255,0.35);
  margin-bottom:0.6rem;
}
.dash-progress{height:6px; border-radius:99px; background:rgba(255,255,255,0.1); overflow:hidden;}
.dash-progress span{display:block; height:100%; background: linear-gradient(90deg, var(--blue), var(--blue-soft));}

.connect-card{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  border-radius: var(--radius);
  border: 1px solid var(--card-line);
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  padding: 1rem 1.2rem;
}
.connect-card .left{display:flex; align-items:center; gap:0.9rem;}
.connect-card .brand-ic{
  width:42px; height:42px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; font-size:1.2rem; color:#fff;
}
.connect-card .brand-ic.strava{background: linear-gradient(135deg,#FC5200,#B23A0F);}
.connect-card .brand-ic.googlefit{background: linear-gradient(135deg,#4285F4,#34A853);}
.connect-card .brand-ic.fitbit{background: linear-gradient(135deg,#00B0B9,#0A1730);}
.connect-card .name{color:#fff; font-weight:700; font-size:1.02rem;}
.connect-card .sub{color: var(--ink-dim); font-size:0.8rem;}
.connect-card .chev{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--card-line);
  display:flex; align-items:center; justify-content:center; color: var(--ink-dim);
}

.next-stop{
  border-radius: var(--radius);
  border: 1px solid var(--card-line);
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  padding: 1.1rem 1.2rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.next-stop .eyebrow{margin-bottom:0.2rem;}
.next-stop .title{color:#fff; font-family:var(--font-display); font-weight:700; font-size:1.15rem;}
.flag-ic{
  width:46px; height:46px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #FF7A7A, #B23A4E);
  display:flex; align-items:center; justify-content:center; color:#fff;
  box-shadow: 0 0 18px rgba(178,58,78,0.45);
}

.route-map-card{
  border-radius: var(--radius);
  border: 1px solid var(--card-line);
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  padding: 1.3rem 1.2rem 1rem;
}
.route-map-card h4{
  text-align:center; color: var(--blue-soft); font-family:var(--font-display); font-size:1rem; margin-bottom:1.3rem;
}
.route-map-svg{width:100%; height:auto;}
.route-map-legend{display:flex; justify-content:space-between; margin-top:0.5rem;}
.route-map-legend span{font-size:0.82rem; color: var(--ink-dim); text-align:center; flex:1;}
.route-map-legend span.active{color: var(--blue-soft); font-weight:700;}

.dash-bottom-nav{
  display:flex; justify-content:space-between;
  border-radius: var(--radius);
  border: 1px solid var(--card-line);
  background: rgba(10,23,48,0.85);
  padding: 0.9rem 0.4rem;
  backdrop-filter: blur(10px);
}
.dash-bottom-nav a{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:0.3rem;
  color: var(--ink-faint); font-size:0.72rem;
}
.dash-bottom-nav a.active{color: var(--blue-soft);}
.dash-bottom-nav a i{font-size:1.15rem;}

@media (max-width: 380px){
  .dash-grid{grid-template-columns:1fr 1fr; gap:0.7rem;}
}

.dash-view-title{color:#fff; font-family:var(--font-display); font-weight:700; font-size:1.3rem; text-align:center; margin-bottom:0.2rem;}
.dash-section-label{color: var(--blue-soft); font-weight:700; font-size:0.92rem; margin: 0.4rem 0 0.2rem;}

.dash-banner{
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid rgba(107,182,255,0.25);
  background: linear-gradient(145deg, #163B7A, #0E1F44 70%);
  box-shadow: var(--glow-blue);
}
.dash-banner img{width:100%; height:auto; display:block; mix-blend-mode:luminosity; opacity:0.9;}

.connect-card--stack{
  flex-direction:column; align-items:flex-start; gap:0.6rem;
}
.connect-card .brand-ic.healthconnect{background: linear-gradient(135deg,#2E8CFF,#1450A6);}
.connect-card .brand-ic.garmin{background: linear-gradient(135deg,#00A0DC,#00415E);}

.val-lg{color:#fff; font-family:var(--font-display); font-weight:700; font-size:1.1rem; line-height:1.3; max-width:220px;}

.checkpoint-row{
  display:flex; align-items:center; gap:0.9rem;
  border-radius: var(--radius);
  border: 1px solid var(--card-line);
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  padding: 0.9rem 1.1rem;
}
.checkpoint-row.locked{opacity:0.55;}
.checkpoint-row .cp-status{
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:1rem;
}
.checkpoint-row.done .cp-status{background: linear-gradient(135deg,#3FD68A,#1FA463); box-shadow:0 0 12px rgba(31,164,99,0.4);}
.checkpoint-row.locked .cp-status{background: rgba(255,255,255,0.08); color: var(--ink-dim); border:1px solid var(--card-line);}
.checkpoint-row .cp-info{flex:1;}
.checkpoint-row .cp-name{color:#fff; font-weight:700; font-size:0.98rem;}
.checkpoint-row .cp-place, .checkpoint-row .cp-steps{color: var(--ink-dim); font-size:0.82rem;}
.checkpoint-row .cp-date{color: var(--ink-dim); font-size:0.78rem; text-align:right; flex-shrink:0;}

.podium{display:flex; align-items:flex-end; justify-content:center; gap:1rem; margin: 0.8rem 0 1.2rem;}
.podium-item{
  text-align:center; flex:1; max-width:120px;
  border-radius: var(--radius); border:1px solid var(--card-line);
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  padding: 1rem 0.6rem 0.9rem;
}
.podium-item.podium-first{padding-top:1.6rem; border-color: rgba(107,182,255,0.4); box-shadow: var(--glow-blue);}
.podium-avatar{position:relative; display:inline-block; margin-bottom:0.5rem;}
.podium-avatar i{font-size:2.6rem; color: var(--blue-soft);}
.podium-badge{
  position:absolute; top:-6px; right:-6px;
  width:20px; height:20px; border-radius:50%;
  background: linear-gradient(135deg,#3FD68A,#1FA463);
  color:#fff; font-size:0.68rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  border: 2px solid #0E1F44;
}
.podium-name{color:#fff; font-weight:700; font-size:0.85rem; margin-bottom:0.2rem;}
.podium-steps{color: var(--blue-soft); font-family:var(--font-display); font-weight:700; font-size:0.92rem; line-height:1.2;}
.podium-steps span{display:block; color: var(--ink-dim); font-family:var(--font-body); font-weight:400; font-size:0.68rem;}

.dash-search{
  display:flex; align-items:center; gap:0.6rem;
  border-radius: 99px; border:1px solid var(--card-line);
  background: rgba(255,255,255,0.04);
  padding: 0.65rem 1.1rem;
  color: var(--ink-dim);
}
.dash-search input{
  background:transparent; border:none; outline:none; color:#fff; flex:1; font-size:0.92rem;
}
.dash-search input::placeholder{color: var(--ink-faint);}

.leaderboard-table{display:grid; gap:0.5rem;}
.lb-head{
  display:grid; grid-template-columns: 0.6fr 1.6fr 1fr;
  color: var(--blue-soft); font-size:0.8rem; font-weight:700;
  padding: 0 1.1rem;
}
.lb-row{
  display:grid; grid-template-columns: 0.6fr 1.6fr 1fr;
  align-items:center;
  border-radius: var(--radius);
  border: 1px solid var(--card-line);
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  padding: 0.75rem 1.1rem;
  color:#fff; font-weight:600; font-size:0.92rem;
}
.lb-row.me{border-color: rgba(107,182,255,0.45); box-shadow: var(--glow-blue);}