*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
    :root{
      --brand:#F58220; --brand-dim:rgba(245, 130, 32,0.15);
      --bg:#12161a; --surface:#22262d; --surface2:#2c323c;
      --border:rgba(255,255,255,0.05);
      --text:#FFFFFF; --muted:rgba(255,255,255,0.65); --label:rgba(255,255,255,0.55); --dim:rgba(255,255,255,0.20);
      --green:#22C55E; --green-dim:rgba(34,197,94,0.12);
      --blue:#60A5FA; --blue-dim:rgba(96,165,250,0.12);
      --purple:#A78BFA; --purple-dim:rgba(167,139,250,0.12);
      --gold:#FFD000; --gold-dim:rgba(255,208,0,0.15);
      --silver:#C8D8E8; --bronze:#F4A84A;
      --radius:20px; --radius-sm:16px; --radius-xs:8px;
      --font:'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
      --font-num:'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
      /* Typography scale tokens (Whoop-Style, Crisp & Legible on Mobile) */
      --fs-xs: 12px;
      --fs-sm: 13.5px;
      --fs-base: 15px;
      --fs-md: 17px;
      --fs-lg: 19px;
      --fs-xl: 22px;
      --fs-xxl: 32px;
    }
    html{background:var(--bg);}
    html,body{height:100dvh;overflow:hidden;max-width:100vw;overscroll-behavior:none;}
    body {
      font-family: var(--font);
      background: var(--bg);
      background-attachment: fixed;
      background-size: 100% 100dvh;
      color: var(--text);
      display: flex;
      flex-direction: column;
      height: 100dvh;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      letter-spacing: -0.011em;
    }

    /* ── Header ── */
    .header{
      position:sticky;top:0;z-index:200;
      background:rgba(18, 22, 26, 0.94);
      backdrop-filter:blur(20px);
      -webkit-backdrop-filter:blur(20px);
      padding:max(14px,env(safe-area-inset-top)) 16px 14px;
      border-bottom: 1px solid rgba(255,255,255,0.04);
    }
    .hdr-inner{
      max-width:540px;margin:0 auto;width:100%;
      display:flex;align-items:center;justify-content:space-between;gap:8px;
    }
    .hdr-left{display:flex;align-items:center;gap:6px;flex:1;min-width:0;}
    .hdr-right{display:flex;align-items:center;gap:0;flex:1;justify-content:flex-end;min-width:0;}
    .hdr-center{display:flex;align-items:center;justify-content:center;flex:1.5;min-width:0;font-size:12px;font-weight:700;color:rgba(255,255,255,0.9);text-transform:uppercase;letter-spacing:0.8px;text-align:center;white-space:nowrap;}
    .hdr-logo-img{height:26px;width:auto;opacity:1;}
    .icon-btn{background:none;border:none;cursor:pointer;padding:8px;border-radius:9px;color:var(--muted);display:flex;align-items:center;transition:color 0.15s;}
    .icon-btn:active{color:#fff;}
    .icon-btn svg{width:20px;height:20px;}
    @keyframes spin{to{transform:rotate(360deg);}}
    .spinning{animation:spin 1s linear infinite;}
    .btn-strava-connect{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      width:100%;
      padding:14px;
      background:var(--brand);
      border:none;
      border-radius:24px;
      color:#fff;
      font-size:13px;
      font-weight:800;
      font-family:var(--font);
      text-transform:uppercase;
      letter-spacing:0.8px;
      text-decoration:none;
      cursor:pointer;
      box-shadow:0 4px 12px rgba(245, 130, 32,0.25);
      transition:all 0.2s;
    }
    .btn-strava-connect:hover{
      background:#d0511e;
      transform:translateY(-1px);
      box-shadow:0 6px 16px rgba(245, 130, 32,0.35);
    }
    .btn-strava-connect:active{
      transform:translateY(1px);
    }
    .you-social-link{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      flex:1;
      padding:12px;
      background:rgba(255,255,255,0.04);
      border:1px solid var(--border);
      border-radius:var(--radius-sm);
      color:var(--muted);
      text-decoration:none;
      font-size:13px;
      font-weight:600;
      transition:all 0.2s;
    }
    .you-social-link:hover{
      background:rgba(255,255,255,0.08);
      color:#fff;
      border-color:rgba(255,255,255,0.2);
      transform:translateY(-1px);
    }
    .you-social-link:active{
      transform:translateY(1px);
    }
    .sign-out-btn{font-size:13px;color:var(--muted);background:rgba(255,255,255,0.12);border:1px solid var(--border);cursor:pointer;padding:6px 12px;border-radius:20px;font-family:var(--font);font-weight:600;transition:all 0.15s;}
    .sign-out-btn:active{color:#fff;background:rgba(255,255,255,0.1);}
    .hdr-avatar{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 30% 30%, #f472b6 0%, var(--brand) 70%, #c94a10 100%);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;letter-spacing:0.5px;border:none;box-shadow:0 0 0 2px rgba(245, 130, 32,0.3), 0 2px 8px rgba(245, 130, 32,0.25);flex-shrink:0;cursor:pointer;transition:box-shadow 0.2s ease;}
    .hdr-btn{width:40px;height:40px;border-radius:50%;background:none;border:none;color:rgba(255,255,255,0.90);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s ease;}
    .hdr-btn:hover{background:rgba(255,255,255,0.06);color:#fff;}
    .hdr-btn:active{transform:scale(0.95);background:rgba(255,255,255,0.12);}
    .hdr-btn svg{width:22px;height:22px;}
    .tab-you-profile {
      background: var(--surface);
      border: none;
      border-radius: var(--radius);
      padding: 24px 20px;
      margin-bottom: 12px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    }
    .tab-you-avatar {
      width: 84px;
      height: 84px;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, #f472b6 0%, var(--brand) 70%, #c94a10 100%);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      font-weight: 800;
      letter-spacing: 0.5px;
      border: none;
      box-shadow: 0 0 0 3px rgba(245, 130, 32, 0.3), 0 4px 15px rgba(245, 130, 32, 0.2);
      margin: 0 auto 14px;
      transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .tab-you-avatar:hover {
      transform: scale(1.06) rotate(3deg);
    }
    .tab-you-name {
      font-size: 24px;
      font-weight: 800;
      color: #fff;
      text-align: center;
      letter-spacing: -0.5px;
      font-family: 'Inter Tight', var(--font);
    }
    .tab-you-tags {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: center;
      margin-top: 10px;
    }
    .tab-you-detail-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px;
      border-bottom: 1px solid var(--border);
    }
    .tab-you-detail-row:last-child {
      border-bottom: none;
    }
    .tab-you-detail-lbl {
      font-size: var(--fs-sm);
      color: var(--muted);
      font-weight: 500;
    }
    .tab-you-detail-val {
      font-size: var(--fs-base);
      font-weight: 700;
      color: var(--text);
    }
    /* You tab insight cards */
    .you-cards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 0;
    }
    .you-card {
      background: var(--surface);
      border: none;
      border-radius: var(--radius-sm);
      padding: 16px 18px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
      transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }
    .you-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(0,0,0,0.2);
      background: var(--surface2);
    }
    .you-card-icon {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 12px;
    }
    .you-card-val {
      font-size: var(--fs-xl);
      font-weight: 800;
      color: #fff;
      line-height: 1.1;
      letter-spacing: -0.3px;
    }
    .you-card-lbl {
      font-size: 10px;
      font-weight: 700;
      color: rgba(255, 255, 255, 0.45);
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-top: 6px;
    }
    .you-card-sub {
      font-size: 10.5px;
      color: var(--label);
      margin-top: 3px;
    }
    /* Consistency bar */
    .you-consist-bar {
      height: 6px;
      background: rgba(255, 255, 255, 0.10);
      border-radius: 3px;
      margin-top: 12px;
      overflow: hidden;
    }
    .you-consist-fill {
      height: 100%;
      border-radius: 3px;
      background: var(--green);
      transition: width 0.8s ease;
      box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
    }
    /* Streak comparison */
    .you-streak-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px;
      border-bottom: 1px solid var(--border);
    }
    .you-streak-row:last-child {
      border-bottom: none;
    }
    .you-streak-lbl {
      font-size: var(--fs-base);
      color: var(--muted);
      font-weight: 600;
    }
    .you-streak-val {
      font-size: var(--fs-xl);
      font-weight: 800;
      color: var(--brand);
    }
    /* Medal prediction card */
    .medal-pred {
      background: var(--surface);
      border: none;
      border-radius: var(--radius-sm);
      padding: 18px 16px;
      display: flex;
      align-items: center;
      gap: 14px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
      transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .medal-pred:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(0,0,0,0.2);
    }
    .recovery-card{background:var(--surface);border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:4px;}
    .recovery-header{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
    .recovery-title{font-size:13px;font-weight:800;color:#fff;}
    .recovery-sub{font-size:11px;color:var(--muted);margin-top:1px;}
    .recovery-chips{display:flex;flex-wrap:wrap;gap:7px;}
    .recovery-chip{display:flex;align-items:center;gap:5px;background:rgba(255,255,255,0.07);border-radius:20px;padding:6px 11px;font-size:12px;font-weight:600;color:#fff;}
    .heatmap-wrap {
      background: var(--surface);
      border: none;
      border-radius: var(--radius-sm);
      padding: 16px 14px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
      transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .heatmap-wrap:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(0,0,0,0.2);
    }
    .heatmap-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:8px;}
    .hm-day{aspect-ratio:1;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:rgba(255,255,255,0.35);}
    .hm-day.today{outline:2px solid var(--brand);outline-offset:1px;}
    .hm-day.future{background:rgba(255,255,255,0.04);color:rgba(255,255,255,0.15);}
    .hm-day.rest{background:rgba(255,255,255,0.07);}
    .hm-day.km-5{background:rgba(245, 130, 32,0.35);color:#fff;}
    .hm-day.km-8{background:rgba(245, 130, 32,0.55);color:#fff;}
    .hm-day.km-10{background:rgba(245, 130, 32,0.75);color:#fff;}
    .hm-day.km-15{background:rgba(245, 130, 32,1);color:#fff;}
    .hm-day.km-21{background:linear-gradient(135deg,#FC6100 0%,#FFD000 100%) !important;color:#fff !important;box-shadow:0 0 12px rgba(252,97,0,0.6);font-weight:900;}
    .hm-legend{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:10px;color:var(--muted);}
    .hm-swatch{width:12px;height:12px;border-radius:3px;}
    .medal-pred-icon{font-size:32px;flex-shrink:0;}
    .medal-pred-title{font-size:15px;font-weight:800;color:#fff;}
    .medal-pred-sub{font-size:12px;color:var(--muted);margin-top:3px;}

    /* ── Hero profile strip ── */
    .hero-profile{
      background:transparent;
      padding:18px 16px 20px;
      text-align:center;
    }
    .hero-rings-block{
      background: transparent;
      padding: 16px 0 0;
      margin-bottom: 0;
    }
    .hero-metrics-block{
      padding:0 0 16px;
    }
    .hero-top{display:flex;align-items:center;gap:12px;}
    .avatar{
      width:46px;height:46px;border-radius:50%;
      background:var(--brand);color:#fff;
      display:flex;align-items:center;justify-content:center;
      font-size:18px;font-weight:800;flex-shrink:0;
      border:2px solid rgba(245, 130, 32,0.4);
    }
    .hero-info{flex:1;min-width:0;}
    .hero-name{font-size:20px;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.3px;}
    .hero-tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:8px;}
    .hero-tag{background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.70);font-size:11px;font-weight:600;padding:4px 10px;border-radius:20px;letter-spacing:0.3px;border:1px solid rgba(255,255,255,0.10);}

    /* ── Medal rings row ── */
    .rings-row{display:flex;justify-content:space-around;align-items:flex-start;margin-bottom:12px;}
    .ring-box{display:flex;flex-direction:column;align-items:center;gap:0;}
    .ring-svg-wrap{position:relative;width:min(108px,29vw);height:min(108px,29vw);flex-shrink:0;}
    .ring-svg-wrap svg{width:100%;height:100%;transform:rotate(-90deg) translateZ(0);backface-visibility:hidden;shape-rendering:geometricPrecision;}
    .ring-bg{fill:none;stroke:rgba(255,255,255,0.08);stroke-width:4.5;shape-rendering:geometricPrecision;}
    .ring-fill{fill:none;stroke-width:4.5;stroke-linecap:round;transition:stroke-dashoffset 2.2s cubic-bezier(0.22, 1, 0.36, 1);shape-rendering:geometricPrecision;}
    .ring-fill.br{ stroke: #C8843A; }
    .ring-fill.si{ stroke: #A8BCC8; }
    .ring-fill.go{ stroke: #D4A030; }
    .ring-inner{
      position:absolute;inset:0;display:flex;flex-direction:column;
      align-items:center;justify-content:center;
    }
    .ring-pct{font-size:18px;font-weight:600;color:#fff;line-height:1;letter-spacing:-0.5px;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;}
    .ring-check{font-size:22px;line-height:1;}
    .ring-emoji{font-size:20px;margin-bottom:3px;}
    .ring-name{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;margin-top:10px;color:#fff;}
    .ring-need{font-size:11px;font-weight:600;color:var(--muted);margin-top:4px;text-align:center;line-height:1.3;letter-spacing:0.3px;}
    .ring-need.done{color:var(--green);}

    /* ── In-App Notification Banner ── */
    @keyframes bannerSlideIn {
      from { opacity:0; transform:translateY(-12px); }
      to   { opacity:1; transform:translateY(0); }
    }
    @keyframes bannerSlideOut {
      from { opacity:1; transform:translateY(0); max-height:200px; }
      to   { opacity:0; transform:translateY(-8px); max-height:0; padding:0; margin:0; }
    }
    #inapp-notification-banner {
      display:none;
      animation: bannerSlideIn 0.3s ease forwards;
      margin-bottom:14px;
    }
    #inapp-notification-banner.hiding {
      animation: bannerSlideOut 0.3s ease forwards;
      overflow:hidden;
    }
    .banner-card {
      border-radius: var(--radius-sm);
      padding: 14px 16px;
      position: relative;
      background: var(--surface);
      border-left: 4px solid var(--brand);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
      transition: all 0.25s ease;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .banner-card.type-broadcast {
      border-left-color: #7C3AED;
    }
    .banner-card.type-recovery {
      border-left-color: #22C55E;
    }
    .banner-card.type-insight {
      border-left-color: #60A5FA;
    }
    .banner-card.type-warning {
      border-left-color: #FC6100;
      background: #050607;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    .banner-icon {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      background: rgba(245, 130, 32, 0.12);
      color: var(--brand);
    }
    .banner-card.type-broadcast .banner-icon {
      background: rgba(124, 58, 237, 0.12);
      color: #A78BFA;
    }
    .banner-card.type-recovery .banner-icon {
      background: rgba(34, 197, 94, 0.12);
      color: #22C55E;
    }
    .banner-card.type-insight .banner-icon {
      background: rgba(96, 165, 250, 0.12);
      color: #60A5FA;
    }
    .banner-card.type-warning .banner-icon {
      background: rgba(252, 97, 0, 0.12);
      color: #FC6100;
    }
    .banner-content {
      flex: 1;
      min-width: 0;
    }
    .banner-dismiss-btn {
      position:absolute; top:9px; right:9px;
      background:rgba(255,255,255,0.08); border:none; cursor:pointer;
      width:24px; height:24px; border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      color:rgba(255,255,255,0.55); font-size:14px; font-weight:700;
      transition:background 0.15s, color 0.15s;
      font-family:var(--font);
      line-height:1; padding:0;
    }
    .banner-dismiss-btn:hover { background:rgba(255,255,255,0.18); color:#fff; }
    .banner-meta { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
    .banner-type-pill {
      font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:1px;
      padding:2px 7px; border-radius:20px; border:1px solid currentColor; opacity:0.8;
    }
    .banner-type-pill.broadcast { color:#A78BFA; }
    .banner-type-pill.recovery  { color:#22C55E; }
    .banner-type-pill.insight   { color:#60A5FA; }
    .banner-title {
      font-size:13px; font-weight:800; color:#fff; line-height:1.3;
      padding-right:28px;
    }
    .banner-body {
      font-size:13px; color:rgba(255,255,255,0.68); margin-top:4px; line-height:1.5;
    }
    .banner-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
    .banner-chip {
      display:flex; align-items:center; gap:5px;
      background:rgba(255,255,255,0.07); border-radius:20px;
      padding:5px 10px; font-size:11.5px; font-weight:600; color:#fff;
      border:1px solid rgba(255,255,255,0.1);
    }
    .banner-time {
      font-size:10px; color:rgba(255,255,255,0.35); margin-top:6px;
    }

    /* ── Big metric trio ── */
    .metric-trio{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;}
    .metric-box{
      background:var(--surface);border:none;
      border-radius:var(--radius-sm);
      padding:18px 12px 16px;text-align:center;
    }
    .metric-val{font-size:32px;font-weight:700;line-height:1;letter-spacing:-0.5px;}
    .metric-val.orange{color:var(--brand);}
    .metric-val.green{color:var(--green);}
    .metric-val.blue{color:var(--blue);}
    .metric-lbl{font-size:10px;font-weight:700;color:var(--label);text-transform:uppercase;letter-spacing:1.2px;margin-top:8px;}

    /* ── Content area ── */
    .swipe-container-viewport {
      flex: 1;
      width: 100%;
      overflow: hidden;
      position: relative;
      background: transparent;
      display: flex;
      flex-direction: column;
    }
    .swipe-container-track {
      display: flex;
      width: 400%;
      height: 100%;
      transition: transform 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      will-change: transform;
    }
    .content {
      width: 25%;
      flex-shrink: 0;
      display: block !important;
      box-sizing: border-box;
      overflow-y: auto;
      height: 100%;
      -webkit-overflow-scrolling: touch;
      padding: 14px 20px 90px;
    }
    .hidden {
      display: none !important;
    }
    .hidden-tab {
      display: none !important;
    }
    .max-w{max-width:540px;margin:0 auto;}

    /* ── Section label ── */
    .sec{font-size:13px;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:1.5px;margin:24px 0 14px;}
    .sec:first-child{margin-top:4px;}
    .card > .sec{padding:18px 20px 0;margin:0 0 12px;}
    .medal-pred > .sec,.heatmap-wrap > .sec{margin:0 0 14px;}

    /* ── Card ── */
    .card{background:var(--surface);border:none;border-radius:var(--radius);overflow:hidden;margin-bottom:12px;}

    /* ── List row ── */
    .lrow {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 13px 16px;
      border-bottom: 1px solid var(--border);
      transition: background 0.2s ease, transform 0.2s ease;
      cursor: pointer;
    }
    .lrow:hover {
      background: rgba(255, 255, 255, 0.015);
    }
    .lrow:hover > div:first-child {
      transform: scale(1.1);
      filter: brightness(1.1) drop-shadow(0 0 4px currentColor);
    }
    .lrow > div:first-child {
      transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.2s ease;
    }
    .lrow:last-child{border-bottom:none;}
    .lrow-left{flex:1;}
    .lrow-label{font-size:15px;font-weight:600;color:var(--text);}
    .lrow-sub{font-size:12px;color:var(--label);margin-top:2px;}
    .lrow-val{font-size:16px;font-weight:700;color:var(--brand);flex-shrink:0;transition: color 0.2s ease;}
    
    /* ── Personal Bests Cards ── */
    .pb-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      margin-bottom: 16px;
    }
    .pb-card {
      background: var(--surface);
      border: none;
      border-radius: var(--radius-sm);
      padding: 12px 16px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      position: relative;
      overflow: hidden;
      transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease, background 0.25s ease;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      min-height: 64px;
    }
    .pb-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
      background: var(--surface2);
    }
    .pb-card-left {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }
    .pb-card-header {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .pb-card-icon {
      width: 30px;
      height: 30px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .pb-card:hover .pb-card-icon {
      transform: scale(1.08);
    }
    .pb-card-label {
      font-size: 14px;
      font-weight: 700;
      color: rgba(255,255,255,0.8);
      letter-spacing: 0.6px;
      text-transform: uppercase;
    }
    .pb-card-val {
      font-size: 20px;
      font-weight: 800;
      color: #fff;
      letter-spacing: -0.5px;
      text-align: right;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .pb-card-sub {
      font-size: 12px;
      color: var(--muted);
      margin-top: 1px;
    }
    
    /* ── Activity Breakdown Chips ── */
    #act-type-breakdown span {
      border: 1px solid rgba(255, 255, 255, 0.05) !important;
      transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      cursor: pointer;
      display: inline-block;
      box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.02);
    }
    #act-type-breakdown span:hover {
      transform: translateY(-1.5px);
      border-color: currentColor !important;
      filter: brightness(1.15) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
    }
    #act-type-breakdown span:active {
      transform: scale(0.96);
    }
    /* Interesting Facts */
    .facts-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:0;}
    .fact-card{background:var(--surface);border-radius:var(--radius-sm);padding:14px 14px;}
    .fact-icon{font-size:20px;margin-bottom:8px;}
    .fact-val{font-size:17px;font-weight:800;color:#fff;line-height:1.2;}
    .fact-lbl{font-size:12px;font-weight:600;color:rgba(255,255,255,0.8);text-transform:uppercase;letter-spacing:0.8px;margin-top:5px;}
    /* Milestones */
    .milestones-wrap{display:flex;flex-wrap:wrap;gap:8px;}
    .milestone{display:flex;align-items:center;gap:7px;background:var(--surface);border-radius:20px;padding:7px 12px;opacity:0.35;transition:opacity 0.3s;}
    .milestone.earned{opacity:1;}
    .milestone-ico{font-size:16px;line-height:1;}
    .milestone-lbl{font-size:12px;font-weight:700;color:#fff;}
    /* Stat cards grid */
    .stat-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:0;}
    #mystats-grid-container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 10px;
    }
    .stat-card-item {
      display: flex !important;
      flex-direction: column !important;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 16px 14px;
      background: var(--surface);
      border: none;
      border-radius: var(--radius-sm);
      transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      cursor: pointer;
    }
    .stat-card-item:hover {
      transform: translateY(-2px);
      background: var(--surface2);
    }
    .stat-card-item:active {
      transform: scale(0.96);
    }
    /* Subtle icon highlight on hover */
    .stat-card-item:nth-of-type(1):hover .stat-card-icon { box-shadow: 0 0 12px rgba(245, 130, 32, 0.3); }
    .stat-card-item:nth-of-type(2):hover .stat-card-icon { box-shadow: 0 0 12px rgba(34, 197, 94, 0.25); }
    .stat-card-item:nth-of-type(3):hover .stat-card-icon { box-shadow: 0 0 12px rgba(96, 165, 250, 0.25); }
    .stat-card-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;flex-shrink:0;}
    .stat-card-val{font-size:26px;font-weight:800;color:#fff;line-height:1.1;letter-spacing:-0.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .stat-unit-suffix{font-size:13px;font-weight:600;color:rgba(255,255,255,0.45);margin-left:2px;}
    .stat-card-label{font-size:10px;font-weight:700;color:rgba(255,255,255,0.40);text-transform:uppercase;letter-spacing:0.8px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .stat-card-sub{font-size:var(--fs-sm);color:var(--label);margin-top:3px;}

    /* ── WHOOP-style activity tile rows ── */
    #act-list{display:grid;gap:8px;}
    .date-group {
      background: var(--surface);
      border: none;
      border-radius: var(--radius);
      margin-bottom: 12px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
      transition: all 0.25s ease;
      overflow: hidden;
    }
    .date-group:hover {
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    }
    .date-group:active {
      transform: scale(0.99);
    }
    .date-group.multi-activity {
      background: linear-gradient(135deg, rgba(245, 130, 32, 0.04) 0%, var(--surface) 100%);
    }
    .date-row {
      display: flex;
      align-items: center;
      padding: 16px 14px;
      cursor: pointer;
      gap: 10px;
      user-select: none;
    }
    .date-row:active {
      background: rgba(255, 255, 255, 0.03);
    }
    .date-col{flex:1;}
    .date-label{font-size:18px;font-weight:700;color:#fff;}
    .date-sub{font-size:14px;color:var(--label);margin-top:3px;}
    .date-pts-strip{display:flex;gap:6px;align-items:center;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end;}
    .dpill {
      font-size: 13px;
      font-weight: 700;
      padding: 5px 10px;
      border-radius: 9px;
      white-space: nowrap;
      border: 1px solid transparent;
    }
    .dpill.dist {
      background: rgba(96, 165, 250, 0.12);
      color: #60A5FA;
      border-color: rgba(96, 165, 250, 0.25);
      box-shadow: 0 0 8px rgba(96, 165, 250, 0.05);
    }
    .dpill.bonus {
      background: rgba(255, 208, 0, 0.12);
      color: #FFD000;
      border-color: rgba(255, 208, 0, 0.25);
      box-shadow: 0 0 8px rgba(255, 208, 0, 0.05);
    }
    .dpill.chall {
      background: rgba(34, 197, 94, 0.12);
      color: #22C55E;
      border-color: rgba(34, 197, 94, 0.25);
      box-shadow: 0 0 8px rgba(34, 197, 94, 0.05);
    }
    .dpill.total {
      background: linear-gradient(135deg, #FC6100 0%, var(--brand) 100%);
      color: #fff;
      border-color: rgba(245, 130, 32, 0.3);
      box-shadow: 0 0 10px rgba(245, 130, 32, 0.25);
    }
    .date-chevron{font-size:15px;color:var(--label);transition:transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);flex-shrink:0;}
    .date-group.open .date-chevron{transform:rotate(180deg);}
    .acts-inner{display:none;border-top:1px solid var(--border);}
    .date-group.open .acts-inner{display:block;}

    /* WHOOP Date Row Styles */
    .whoop-date-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: var(--surface2);
      border-radius: 10px;
      width: 46px;
      height: 46px;
      flex-shrink: 0;
    }
    .whoop-date-num {
      font-size: 20px;
      font-weight: 800;
      color: #fff;
      line-height: 1;
      letter-spacing: -0.5px;
    }
    .whoop-date-month {
      font-size: 10px;
      font-weight: 800;
      color: rgba(255, 255, 255, 0.45);
      margin-top: 2px;
      text-transform: uppercase;
      letter-spacing: 0.8px;
    }
    .whoop-stats-box {
      display: flex;
      flex: 1;
      gap: 16px;
      margin-left: auto;
      align-items: center;
      justify-content: flex-end;
    }
    .whoop-stat-item {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }
    .whoop-stat-val {
      font-size: 18px;
      font-weight: 600;
      color: #fff;
      line-height: 1.2;
    }
    .whoop-stat-lbl {
      font-size: 10px;
      font-weight: 700;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-top: 2px;
    }

    /* ── WHOOP-style act tile ── */
    .act-tile{display:flex;align-items:center;gap:12px;padding:12px 24px 12px 14px;border-bottom:1px solid rgba(255,255,255,0.05);position:relative;}
    .act-tile:last-child{border-bottom:none;}
    .act-tile-icon{
      height:32px;padding:0 12px;border-radius:8px;flex-shrink:0;
      display:flex;align-items:center;justify-content:flex-start;gap:6px;
      font-size:11px;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:0.3px;
      width:auto;min-width:145px;box-sizing:border-box;
    }
    .act-tile-icon.walk{background:#10B981;}
    .act-tile-icon.run{background:#0082F0;}
    .act-tile-icon.ride{background:#D97706;}
    .act-tile-icon.hike{background:#8B5CF6;}
    .act-tile-icon.other{background:#4B5563;}

    /* Sporty activity card borders and backgrounds */
    .act-tile.walk { border-left: 4px solid #10B981; background: rgba(16, 185, 129, 0.03); }
    .act-tile.run  { border-left: 4px solid #0082F0; background: rgba(0, 130, 240, 0.03); }
    .act-tile.ride { border-left: 4px solid #D97706; background: rgba(217, 119, 6, 0.03); }
    .act-tile.hike { border-left: 4px solid #8B5CF6; background: rgba(139, 92, 246, 0.03); }
    .act-tile.other { border-left: 4px solid #4B5563; background: rgba(75, 85, 99, 0.03); }

    .act-tile-body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;}
    .act-tile-sport{font-size:13px;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:0.5px;}
    .act-tile-name{font-size:12px;font-weight:500;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .act-tile-meta{font-size:11px;color:var(--label);margin-top:2px;}
    .act-tile-right{text-align:right;flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;}
    .act-tile-dist{font-size:20px;font-weight:600;color:#fff;line-height:1;letter-spacing:-0.3px;}
    .act-tile-dist-lbl{font-size:11px;font-weight:700;color:rgba(255,255,255,0.8);margin-top:1px;text-transform:uppercase;}
    .act-tile-flag{font-size:8.5px;font-weight:600;padding:2px 6px;border-radius:5px;margin-top:3px;display:inline-block;}
    .flag-valid{background:rgba(34,197,94,0.15);color:#22C55E;}
    .flag-bad{background:rgba(239,68,68,0.15);color:#EF4444;}
    .act-tile-bar{position:absolute;right:8px;top:15%;width:3px;height:70%;border-radius:2px;}
    .act-tile-bar.walk{background:#10B981;}
    .act-tile-bar.run{background:#0082F0;}
    .act-tile-bar.ride{background:#D97706;}
    .act-tile-bar.hike{background:#8B5CF6;}
    .act-tile-bar.other{background:#4B5563;}

    /* ── Medal progress ── */
    .medal-header-row{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 12px;border-bottom:1px solid var(--border);}
    .medal-current-block{display:flex;align-items:center;gap:10px;}
    .medal-emoji-big{font-size:30px;line-height:1;}
    .medal-current-info{}
    .medal-current-lbl{font-size:11.5px;font-weight:700;color:rgba(255,255,255,0.8);text-transform:uppercase;letter-spacing:0.5px;}
    .medal-current-name{font-size:18px;font-weight:900;color:var(--text);}
    .medal-pts-right{text-align:right;}
    .medal-pts-big{font-size:30px;font-weight:600;color:var(--brand);line-height:1;letter-spacing:-0.5px;}
    .medal-pts-lbl{font-size:10.5px;font-weight:600;color:var(--muted);margin-top:3px;}

    .medal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px 14px 14px;}
    .medal-item{background:var(--surface2);border-radius:var(--radius-xs);padding:10px 6px 12px;text-align:center;position:relative;}
    .medal-item.achieved{border-color:var(--brand);}
    .mc-emoji{font-size:24px;margin-bottom:4px;}
    .mc-name{font-size:12px;font-weight:800;margin-bottom:5px;}
    .mc-name.br{color:var(--bronze);} .mc-name.si{color:var(--silver);} .mc-name.go{color:var(--gold);}
    .mc-pct{font-size:22px;font-weight:600;color:#fff;line-height:1;margin-bottom:2px;}
    .mc-pts-lbl{font-size:8.5px;color:var(--muted);margin-bottom:6px;}
    .mc-bar{background:rgba(255,255,255,0.12);border-radius:20px;height:4px;overflow:hidden;margin:0 4px;}
    .mc-fill{height:100%;border-radius:20px;transition:width 0.6s ease;}
    .mc-fill.br{background:var(--bronze);} .mc-fill.si{background:var(--silver);} .mc-fill.go{background:var(--gold);}
    .mc-need{font-size:10px;color:var(--muted);margin-top:5px;line-height:1.4;}
    .mc-done{position:absolute;top:4px;right:4px;font-size:7px;font-weight:600;background:var(--brand);color:#fff;padding:1px 5px;border-radius:5px;}

    /* ── Standing ── */
    .standing-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
    .standing-card{background:var(--surface);border-radius:var(--radius-sm);padding:6px 8px;text-align:center;}
    .standing-rank-big{font-size:22px;font-weight:800;color:var(--brand);line-height:1;letter-spacing:-1px;}
    .standing-cat{font-size:11.5px;font-weight:700;color:#fff;margin-top:2px;line-height:1.3;}
    .standing-sub{font-size:9.5px;font-weight:600;color:var(--muted);margin-top:1px;text-transform:uppercase;letter-spacing:0.8px;}

    /* ── Pace goals ── */
    .pace-row{display:flex;align-items:center;gap:12px;padding:15px 16px;border-bottom:1px solid var(--border);}
    .pace-row:last-child{border-bottom:none;}
    .pace-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
    .pace-text{flex:1;}
    .pace-main{font-size:13px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:0.3px;}
    .pace-sub{font-size:12px;color:var(--muted);margin-top:3px;}
    .pace-val{font-size:15px;font-weight:700;flex-shrink:0;text-align:right;min-width:52px;}

    /* ── Gold achieved card ── */
    .gold-card{padding:16px;}
    .gold-top{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
    .gold-emoji{font-size:34px;line-height:1;}
    .gold-title{font-size:18px;font-weight:900;color:var(--gold);}
    .gold-sub{font-size:12px;color:var(--muted);margin-top:2px;}
    .gold-quote{
      background: transparent;
      border: none;
      border-left: 3px solid var(--brand);
      border-radius: 0;
      padding: 6px 14px;
      margin-bottom: 14px;
    }
    .gold-quote-text{font-size:14px;font-weight:700;color:rgba(255,255,255,0.75);line-height:1.5;font-style:italic;letter-spacing:0.1px;}
    .gold-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;}
    .gold-stat{background:var(--surface2);border-radius:var(--radius-xs);padding:10px 12px;}
    .gold-stat-val{font-size:22px;font-weight:600;color:var(--brand);line-height:1;}
    .gold-stat-lbl{font-size:12px;font-weight:600;color:rgba(255,255,255,0.8);margin-top:3px;text-transform:uppercase;letter-spacing:0.5px;}
    .gold-rival{display:flex;align-items:center;justify-content:space-between;background:var(--surface2);border-radius:var(--radius-xs);padding:10px 12px;}
    .gold-rival-left{flex:1;}
    .gold-rival-label{font-size:13px;font-weight:700;color:#fff;}
    .gold-rival-sub{font-size:10.5px;color:var(--muted);margin-top:2px;}
    .gold-rival-pts{font-size:20px;font-weight:600;color:var(--green);flex-shrink:0;}

    /* ── Streak ── */
    .streak-top{display:flex;align-items:flex-end;justify-content:space-between;padding:14px 16px 10px;}
    .streak-num{font-size:58px;font-weight:600;color:var(--brand);line-height:1;letter-spacing:-2px;}
    .streak-num-lbl{font-size:12px;font-weight:600;color:var(--muted);margin-bottom:8px;}
    .streak-right{text-align:right;}
    .streak-best-val{font-size:20px;font-weight:800;color:#fff;}
    .streak-best-lbl{font-size:10.5px;color:var(--muted);margin-top:2px;}
    .streak-msg-txt{font-size:13px;color:var(--muted);margin-top:4px;}
    .streak-bars-wrap{padding:4px 16px 6px;display:flex;gap:4px;}
    .sbar {
      flex: 1;
      height: 8px;
      border-radius: 4px;
      transform: scaleY(0);
      transform-origin: bottom;
      animation: streak-grow 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    }
    @keyframes streak-grow {
      to { transform: scaleY(1); }
    }
    .sbar.on {
      background: linear-gradient(180deg, #FC6100 0%, var(--brand) 100%);
      box-shadow: 0 0 8px rgba(245, 130, 32, 0.45);
    }
    .sbar.dim {
      background: rgba(245, 130, 32, 0.25);
    }
    .sbar.off {
      background: rgba(255, 255, 255, 0.12);
    }
    .streak-day-labels{display:flex;justify-content:space-between;padding:0 16px 12px;}
    .sdlbl{font-size:8.5px;color:var(--muted);text-align:center;flex:1;}

    /* ── Time of day ── */
    .tod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
    .tod-card{background:var(--surface);border-radius:var(--radius-sm);padding:14px 6px;text-align:center;}
    .tod-icon{font-size:22px;margin-bottom:4px;}
    .tod-val{font-size:26px;font-weight:600;color:var(--brand);line-height:1;}
    .tod-lbl{font-size:12px;font-weight:600;color:rgba(255,255,255,0.8);margin-top:4px;text-transform:uppercase;letter-spacing:0.4px;}

    /* ── Rivals ── */
    .rival-row{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--border);}
    .rival-row:last-child{border-bottom:none;}
    .rival-row.rival-me{background:rgba(245, 130, 32,0.06);}
    .rival-badge{font-size:14px;font-weight:600;padding:5px 10px;border-radius:8px;flex-shrink:0;min-width:42px;text-align:center;}
    .rb-ahead{background:rgba(239,68,68,0.15);color:#EF4444;}
    .rb-you{background:var(--brand);color:#fff;}
    .rb-behind{background:rgba(34,197,94,0.15);color:#22C55E;}
    .rival-name{flex:1;font-size:16px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .rival-gap{font-size:16px;font-weight:700;flex-shrink:0;}
    .gap-up{color:#EF4444;} .gap-dn{color:#22C55E;} .gap-me{color:var(--brand);}

    /* ── Challenges ── */
    .ch-card {
      background: var(--surface);
      border: none;
      border-radius: var(--radius-sm);
      padding: 16px 20px;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .ch-card:hover {
      transform: translateY(-1.5px);
      box-shadow: 0 8px 25px rgba(0,0,0,0.2);
    }
    .ch-card.won {
      border: none;
      border-left: 4px solid #22C55E;
      background: linear-gradient(135deg, rgba(34, 197, 94, 0.04) 0%, var(--surface) 100%);
    }
    .ch-card.won:hover {
      box-shadow: 0 8px 25px rgba(0,0,0,0.2), 0 0 15px rgba(34, 197, 94, 0.05);
    }
    .ch-card.avail {
      border: none;
      border-left: 4px solid #FFD000;
      background: linear-gradient(135deg, rgba(255, 208, 0, 0.04) 0%, var(--surface) 100%);
    }
    .ch-card.avail:hover {
      box-shadow: 0 8px 25px rgba(0,0,0,0.2), 0 0 15px rgba(255, 208, 0, 0.05);
    }
    .ch-card.missed {
      border: none;
      border-left: 4px solid rgba(255, 255, 255, 0.15);
      background: var(--surface);
      opacity: 0.7;
    }
    .ch-card-header {
      display: flex;
      align-items: center;
      gap: 14px;
      width: 100%;
    }
    .ch-card-title-wrap {
      flex: 1;
      min-width: 0;
    }
    .ch-dot {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      flex-shrink: 0;
      font-weight: 800;
      border: 1px solid transparent;
      box-shadow: inset 0 1px 1px rgba(255,255,255,0.05);
    }
    .ch-dot.won {
      background: linear-gradient(135deg, rgba(34,197,94,0.2) 0%, rgba(34,197,94,0.08) 100%);
      color: #22C55E;
      border-color: rgba(34, 197, 94, 0.25);
      filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.25));
    }
    .ch-dot.avail {
      background: linear-gradient(135deg, rgba(255,208,0,0.2) 0%, rgba(255,208,0,0.08) 100%);
      color: #FFD000;
      border-color: rgba(255, 208, 0, 0.25);
      filter: drop-shadow(0 0 4px rgba(255, 208, 0, 0.25));
    }
    .ch-dot.missed {
      background: rgba(255, 255, 255, 0.04);
      color: var(--muted);
      border-color: rgba(255, 255, 255, 0.06);
    }
    .ch-title {
      font-size: var(--fs-md);
      font-weight: 700;
      color: #fff;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .ch-sub {
      font-size: var(--fs-sm);
      color: var(--muted);
      margin-top: 3px;
    }
    .ch-pts {
      font-size: var(--fs-md);
      font-weight: 700;
      flex-shrink: 0;
    }
    .ch-pts { font-size: 12px; font-weight: 700; flex-shrink: 0; }
    .ch-pts.won{color:#22C55E;} .ch-pts.avail{color:#FFD000;} .ch-pts.missed{color:var(--muted);}
    .ch-status-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 12px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.2px;
    }
    .ch-status-bar.won { background: rgba(34, 197, 94, 0.1); color: #22C55E; }
    .ch-status-bar.missed { background: rgba(255,255,255,0.04); color: var(--muted); }
    .ch-status-bar.avail { background: rgba(255,208,0,0.08); color: #FFD000; }

    /* ── Flagged banner ── */
    .flagged-info{background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.2);border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:10px;font-size:11.5px;color:#FCA5A5;line-height:1.6;display:none;}

    /* ── Skeleton ── */
    @keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
    .skeleton{background:linear-gradient(90deg,#1C2030 25%,#252A3A 50%,#1C2030 75%);background-size:800px 100%;animation:shimmer 1.6s ease infinite;border-radius:8px;}
    .skel-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:8px;}
    .skel-line{height:13px;margin-bottom:8px;}
    .skel-line.short{width:40%;} .skel-line.medium{width:65%;} .skel-line.full{width:100%;}

    .empty-state{text-align:center;padding:36px 20px;color:var(--muted);}
    .empty-state .icon{font-size:38px;margin-bottom:10px;display:block;opacity:0.4;}
    .empty-state p{font-size:15px;line-height:1.6;}

    /* ── Bottom nav ── */
    .bottom-nav {
      position: fixed;
      bottom: calc(2px + env(safe-area-inset-bottom));
      left: 50%;
      transform: translateX(-50%);
      width: 92%;
      max-width: 480px;
      background: rgba(20, 24, 27, 0.92);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.04);
      border-radius: 28px;
      display: flex;
      justify-content: space-around;
      padding: 6px;
      z-index: 9999;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
      transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }
    .bnav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 8px 6px;
      text-decoration: none;
      color: var(--muted);
      gap: 4px;
      transition: color 0.3s;
      position: relative;
      flex: 1;
      border-radius: 22px;
      z-index: 2;
    }
    .bnav-label {
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      transition: opacity 0.3s, transform 0.3s;
    }
    .bnav-item svg {
      width: 22px;
      height: 22px;
      stroke-width: 2;
      transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .bnav-item.active {
      color: var(--brand);
    }
    .bnav-item.active svg {
      transform: scale(1.12);
      filter: drop-shadow(0 0 8px rgba(245, 130, 32, 0.55));
    }
    .bnav-indicator {
      display: none !important;
    }    
    #feed-unread-badge {
      animation: badge-pulse 2s infinite;
    }
    @keyframes badge-pulse {
      0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.7);
      }
      70% {
        transform: scale(1.25);
        box-shadow: 0 0 0 6px rgba(249, 115, 22, 0);
      }
      100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(249, 115, 22, 0);
      }
    }

    @media (max-width: 480px) {
      .bottom-nav {
        width: 94%;
        padding: 5px;
      }
      .bottom-nav.nav-five-tabs .bnav-label {
        display: none;
      }
      .bottom-nav.nav-five-tabs .bnav-item {
        padding: 12px 6px;
      }
      .bottom-nav.nav-five-tabs .bnav-indicator {
        top: 5px;
        bottom: 5px;
        border-radius: 20px;
      }
      .bottom-nav.nav-five-tabs .bnav-item {
        border-radius: 20px;
      }
      .stat-card-item {
        padding: 10px 4px;
      }
      .stat-card-val {
        font-size: 17px;
      }
      .stat-card-icon {
        margin-bottom: 6px;
        width: 32px;
        height: 32px;
      }
      .stat-card-icon svg {
        width: 14px;
        height: 14px;
      }
      .stat-card-label {
        font-size: 8.5px;
      }
      #mystats-grid-container {
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 6px !important;
      }
      #mystats-grid-container > .stat-card-item:nth-child(3) {
        grid-column: auto !important;
      }
    }


    .points,.distance,.rank,td,th{font-variant-numeric:tabular-nums;}
  
    .rank-sup{font-size:0.45em;font-weight:700;vertical-align:super;letter-spacing:0;}

    /* ── Embedded Leaderboard styles ── */



    /* ── My banner ── */
    .my-banner{
      background:var(--surface);
      border-bottom:1px solid var(--border);
      padding:12px 16px 14px;
      display:flex;align-items:center;gap:12px;
    }
    .my-info{flex:1;min-width:0;text-align:center;}
    .my-name{font-size:16px;font-weight:800;color:#fff;text-transform:uppercase;text-align:center;}
    .my-tags{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap;justify-content:center;}
    .my-tag{background:rgba(255,255,255,0.12);color:rgba(255,255,255,0.95);font-size:8.5px;font-weight:600;padding:3px 8px;border-radius:20px;}
    .my-pts-block,.my-rank-block{text-align:center;flex-shrink:0;min-width:52px;}
    .my-pts-num,.my-rank-num{font-size:26px;font-weight:600;color:#fff;line-height:1;letter-spacing:-0.3px;}
    .my-pts-lbl,.my-rank-lbl{font-size:11px;text-transform:uppercase;letter-spacing:0.6px;color:rgba(255,255,255,0.8);margin-top:3px;font-weight:600;}

    /* ── Tabs ── */
    .lb-tabs {
      display: flex;
      background: rgba(0, 0, 0, 0.35);
      border: 1px solid rgba(255, 255, 255, 0.05);
      border-radius: var(--radius-sm);
      padding: 3px;
      margin: 10px 0 14px;
      gap: 2px;
    }
    .lb-tab {
      flex: 1;
      padding: 8px 6px;
      font-size: 11px;
      font-weight: 800;
      color: rgba(255, 255, 255, 0.4);
      background: none;
      border: none;
      border-radius: var(--radius-xs);
      cursor: pointer;
      font-family: var(--font);
      text-transform: uppercase;
      letter-spacing: 0.6px;
      transition: all 0.22s cubic-bezier(0.25, 0.8, 0.25, 1);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .lb-tab.active {
      color: #fff;
      background: var(--surface2);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    }

    /* ── Info Banner (replacing Legend) ── */
    .card .standing-card { background: var(--surface2); }

    .lb-info-banner {
      margin-top: 10px;
      padding: 9px 12px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px dashed rgba(255, 255, 255, 0.08);
      border-radius: var(--radius-sm);
      font-size: 10.5px;
      color: var(--muted);
      font-weight: 600;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }

    /* ── Content ── */
    .lb-content{flex:1;padding:10px 20px 80px;max-width:600px;width:100%;margin:0 auto;}

    /* ── Leaderboard row ── */
    .lb-row {
      background: var(--surface);
      border: none;
      border-radius: var(--radius-sm);
      margin-bottom: 6px;
      overflow: hidden;
      cursor: pointer;
      transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.25s ease, background 0.25s ease;
    }
    .lb-row:hover {
      transform: translateY(-1.5px);
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
      background: var(--surface2);
    }
    /* podium left accent — medal color lives here, not on the number */
    .lb-row.rank-1{border-left:3px solid rgba(255, 208, 0, 0.7);}
    .lb-row.rank-2{border-left:3px solid rgba(200, 216, 232, 0.7);}
    .lb-row.rank-3{border-left:3px solid rgba(244, 168, 74, 0.7);}
    /* my row */
    @keyframes shimmerSweep {
      0% { background-position: -200px 0; }
      100% { background-position: 200px 0; }
    }
    .lb-row.is-me {
      border: 1px solid var(--brand) !important;
      background: linear-gradient(120deg, var(--surface) 30%, rgba(255, 255, 255, 0.05) 45%, var(--surface) 60%);
      background-size: 400px 100%;
      animation: shimmerSweep 6s infinite linear;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), 0 0 12px rgba(245, 130, 32, 0.1);
    }
    .lb-row.is-me:hover {
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3), 0 0 18px rgba(245, 130, 32, 0.2);
    }
    .lb-row.is-me.rank-1,.lb-row.is-me.rank-2,.lb-row.is-me.rank-3{border:1px solid var(--brand) !important;}
    .lb-row.is-me-pinned {
      border: 1.5px solid var(--purple) !important;
      background: linear-gradient(120deg, var(--surface) 30%, rgba(255, 255, 255, 0.05) 45%, var(--surface) 60%) !important;
      background-size: 400px 100%;
      animation: shimmerSweep 6s infinite linear;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), 0 0 12px rgba(167, 139, 250, 0.15) !important;
    }
    .lb-row.expanded{border-color:rgba(255,255,255,0.22);}

    /* collapsed summary row */
    .row-summary{
      display:flex;align-items:center;gap:12px;
      padding:14px 14px;
    }

    /* rank col */
    .rank-col{font-size:26px;font-weight:800;line-height:1;min-width:42px;flex-shrink:0;text-align:center;}
    .rank-col.r1{color:#fff;}
    .rank-col.r2{color:#fff;}
    .rank-col.r3{color:#fff;}
    .rank-col.rn{font-size:16px;color:rgba(255,255,255,0.35);font-weight:700;}

    /* row body */
    .row-body{flex:1;min-width:0;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:10px;}
    .row-left{flex:1;min-width:0;}
    .row-name{font-size:var(--fs-md);font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}
    .row-right{flex-shrink:0;text-align:right;}
    .row-pts{display:flex;align-items:center;gap:4px;justify-content:flex-end;}
    .row-medal{font-size:19px;margin-left:2px;}
    .row-pts-num{font-size:24px;font-weight:700;color:var(--brand);}
    .row-pts-unit{font-size:var(--fs-sm);color:var(--label);font-weight:500;}
    .you-chip{display:inline-block;background:var(--brand);color:#fff;font-size:7.5px;font-weight:600;padding:1px 5px;border-radius:4px;margin-left:5px;vertical-align:middle;}
    .row-chevron{font-size:10px;color:var(--label);margin-left:6px;transition:transform 0.2s;display:inline-block;flex-shrink:0;}
    .lb-row.expanded .row-chevron{transform:rotate(180deg);}

    /* expanded detail panel */
    .row-detail {
      display: none;
      border-top: 1px solid var(--border);
      padding: 14px 12px;
      background: rgba(0, 0, 0, 0.15);
    }
    .lb-row.expanded .row-detail{display:block;}

    /* detail grid */
    .detail-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 8px;
      margin-bottom: 12px;
    }
    .detail-cell {
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.04);
      border-radius: 10px;
      padding: 8px 6px;
      text-align: center;
      box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.01);
      transition: all 0.2s ease;
    }
    .detail-cell:hover {
      background: rgba(255, 255, 255, 0.04);
      border-color: rgba(255, 255, 255, 0.08);
    }
    .detail-cell-lbl {
      font-size: 9.5px;
      font-weight: 700;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 4px;
    }
    .detail-cell-val {
      font-size: 14px;
      font-weight: 800;
      color: #fff;
      line-height: 1.2;
    }
    .detail-cell-val.blue {
      color: #60A5FA;
      text-shadow: 0 0 6px rgba(96, 165, 250, 0.1);
    }
    .detail-cell-val.brand {
      color: var(--brand);
      text-shadow: 0 0 6px rgba(245, 130, 32, 0.1);
    }
    .detail-cell-val.gold {
      color: var(--gold);
      text-shadow: 0 0 6px rgba(255, 208, 0, 0.1);
    }
    .detail-cell-val.green {
      color: #22C55E;
      text-shadow: 0 0 6px rgba(34, 197, 94, 0.1);
    }

    /* detail bottom row: sparkline + last active */
    .detail-meta{display:flex;align-items:center;justify-content:space-between;margin-top:6px;}

    .rpill{font-size:9px;font-weight:600;padding:2.5px 7px;border-radius:6px;white-space:nowrap;}
    .rpill.km{background:rgba(96,165,250,0.12);color:var(--blue);}
    .rpill.dist{background:rgba(96,165,250,0.07);color:rgba(96,165,250,0.7);}
    .rpill.bon{background:rgba(245,158,11,0.12);color:var(--gold);}
    .rpill.chal{background:rgba(34,197,94,0.12);color:var(--green);}
    .rpill.team{background:rgba(255,255,255,0.13);color:var(--muted);}

    /* ── Leaderboard Podium styles ── */
    .lb-podium {
      display: flex;
      justify-content: center;
      align-items: flex-end;
      gap: 10px;
      margin: 18px 0 24px;
      padding: 0 4px;
    }
    .podium-card {
      background: var(--surface);
      border-radius: var(--radius);
      padding: 18px 10px 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
      position: relative;
      transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.25s ease, border-color 0.25s ease;
      cursor: pointer;
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    }
    .podium-card:hover {
      transform: translateY(-4px);
    }
    .podium-card:active {
      transform: scale(0.96) translateY(-2px);
    }
    /* Height variance for steps/podium effect */
    .podium-card.rank-1 {
      height: 160px;
      z-index: 3;
      border-color: rgba(255, 208, 0, 0.25);
      background: linear-gradient(180deg, rgba(255, 208, 0, 0.08) 0%, var(--surface) 100%);
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
    }
    .podium-card.rank-2 {
      height: 142px;
      z-index: 2;
      border-color: rgba(200, 216, 232, 0.2);
      background: linear-gradient(180deg, rgba(200, 216, 232, 0.05) 0%, var(--surface) 100%);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
    }
    .podium-card.rank-3 {
      height: 137px;
      z-index: 1;
      border-color: rgba(244, 168, 74, 0.2);
      background: linear-gradient(180deg, rgba(244, 168, 74, 0.05) 0%, var(--surface) 100%);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    }
    /* Active highlighted state on tap */
    .podium-card.active.rank-1 {
      border-color: #FFD000 !important;
      box-shadow: 0 0 25px rgba(255, 208, 0, 0.35), 0 12px 35px rgba(0, 0, 0, 0.5);
      transform: scale(1.04) translateY(-4px);
    }
    .podium-card.active.rank-2 {
      border-color: #C8D8E8 !important;
      box-shadow: 0 0 25px rgba(200, 216, 232, 0.3), 0 12px 35px rgba(0, 0, 0, 0.5);
      transform: scale(1.04) translateY(-4px);
    }
    .podium-card.active.rank-3 {
      border-color: #F4A84A !important;
      box-shadow: 0 0 25px rgba(244, 168, 74, 0.3), 0 12px 35px rgba(0, 0, 0, 0.5);
      transform: scale(1.04) translateY(-4px);
    }
    /* Crowns & medals badge */
    .podium-badge {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 800;
      position: absolute;
      top: -12px;
      left: 50%;
      transform: translateX(-50%);
      box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    }
    .podium-card.rank-1 .podium-badge {
      background: #FFD000; color: #000;
    }
    .podium-card.rank-2 .podium-badge {
      background: #C8D8E8; color: #000;
    }
    .podium-card.rank-3 .podium-badge {
      background: #F4A84A; color: #000;
    }
    .podium-avatar {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: var(--surface2);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      font-weight: 700;
      margin-top: 4px;
      margin-bottom: 8px;
      border: 2px solid transparent;
      flex-shrink: 0;
    }
    .podium-card.rank-1 .podium-avatar { border-color: #FFD000; }
    .podium-card.rank-2 .podium-avatar { border-color: #C8D8E8; }
    .podium-card.rank-3 .podium-avatar { border-color: #F4A84A; }
    .podium-name {
      font-size: 12px;
      font-weight: 700;
      color: #fff;
      text-align: center;
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 2px;
    }
    .podium-team {
      font-size: 11px;
      color: rgba(255,255,255,0.8);
      text-transform: uppercase;
      letter-spacing: 0.3px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
      text-align: center;
      margin-bottom: 8px;
    }
    .podium-pts {
      font-size: 11px;
      font-weight: 800;
      color: var(--brand);
      background: rgba(245, 130, 32, 0.08);
      padding: 3px 8px;
      border-radius: 10px;
      white-space: nowrap;
    }

    /* skeleton */
    @keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
    .skeleton{background:linear-gradient(90deg,#1C2030 25%,#252A3A 50%,#1C2030 75%);background-size:800px 100%;animation:shimmer 1.6s ease infinite;border-radius:8px;}
    .skel-row{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px;margin-bottom:6px;}
    .skel-c{width:36px;height:36px;border-radius:50%;flex-shrink:0;}
    .skel-lines{flex:1;}
    .skel-l{height:11px;margin-bottom:6px;} .skel-l.m{width:60%;} .skel-l.s{width:40%;margin-bottom:0;}

    .empty-box{text-align:center;padding:48px 20px;color:var(--muted);}
    .empty-box .ei{font-size:36px;display:block;margin-bottom:12px;opacity:0.3;}
    .empty-box p{font-size:13px;line-height:1.6;}


    .points,.distance,.rank,td,th{font-variant-numeric:tabular-nums;}
    /* ── Rank movement ── */
    .rank-delta {
      font-size: 9.5px;
      font-weight: 800;
      display: inline-block;
      margin-top: 5px;
      text-align: center;
      padding: 2px 6px;
      border-radius: 6px;
      line-height: 1;
      white-space: nowrap;
    }
    .delta-up {
      color: #22C55E;
      background: rgba(34, 197, 94, 0.12);
      border: 1px solid rgba(34, 197, 94, 0.15);
    }
    .delta-dn {
      color: #EF4444;
      background: rgba(239, 68, 68, 0.12);
      border: 1px solid rgba(239, 68, 68, 0.15);
    }
    .delta-same {
      color: var(--muted);
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.05);
    }

    /* ── Sparkline ── */
    .sparkline{display:flex;align-items:flex-end;gap:2px;height:20px;}
    .spark-bar{width:5px;border-radius:2px 2px 0 0;background:rgba(245, 130, 32,0.5);min-height:2px;}
    .spark-bar.today{background:var(--brand);}

    /* ── Last active badge ── */
    .last-active-chip{font-size:10px;font-weight:600;color:var(--label);}
    .last-active-chip.recent{color:var(--green);}

    /* ── Hall of Fame ── */
    .hof-grid{display:grid;grid-template-columns:1fr;gap:8px;padding:10px 12px 14px;}
    .hof-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px;display:flex;align-items:center;gap:16px;}
    .hof-title{font-size:11px;font-weight:700;color:rgba(255,255,255,0.8);text-transform:uppercase;letter-spacing:0.7px;margin-bottom:6px;}
    .hof-name{font-size:13px;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .hof-val{font-size:20px;font-weight:600;color:var(--brand);line-height:1;margin-bottom:2px;}

    /* ── Weekly tab ── */
    .week-note{font-size:11px;color:var(--label);padding:8px 16px;text-align:center;}

  
    /* ── Mobile responsive ── */
    @media (max-width: 480px) {
      /* My banner: tighter numbers */
      .my-pts-num, .my-rank-num { font-size: 20px; }
      .my-pts-block, .my-rank-block { min-width: 44px; }

      /* Rank col */
      .rank-col { font-size: 20px; min-width: 34px; }

      /* Row name */
      .row-name { font-size: 13.5px; }
      .row-pts-num { font-size: 18px; }

      /* Detail grid: 2 cols */
      .detail-grid { grid-template-columns: 1fr 1fr; }

      /* HOF grid: already 2 cols, fine */

      /* Tab font */
      .lb-tab { font-size: 11px; padding: 8px 4px; }

      /* Legend wrap */
      .lb-info-banner { font-size: 9.5px; }
    }


  

  


  /* ── Updates / Feed Tab ── */
  
  /* Micro-Glass Badges for Highlights */
  #feed-highlights-row {
    display: flex;
    gap: 8px;
    width: 100%;
    margin-bottom: 16px;
  }
  .highlight-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
    cursor: pointer;
    height: 90px;
    background: rgba(40, 46, 54, 0.55);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 8px 4px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.25s ease, box-shadow 0.25s ease;
    position: relative;
  }
  .highlight-card:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  }
  .highlight-emoji {
    font-size: 20px;
    margin-bottom: 4px;
    line-height: 1;
  }
  .highlight-info {
    text-align: center;
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .highlight-title {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.2;
    text-align: center;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .highlight-sub {
    font-size: 10px;
    font-weight: 600;
    color: var(--muted);
    line-height: 1.2;
    margin-top: 2px;
    text-align: center;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  /* ── Community Pulse Carousel & Ticker ── */
  .community-stats-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 12px;
    margin-bottom: 20px;
    width: 100%;
  }
  @media (max-width: 768px) {
    .pulse-card.k2k-card, .pulse-card.active-card {
      grid-column: span 12 !important;
    }
    .pulse-card-stat {
      grid-column: span 6 !important;
    }
  }

  .pulse-odo-card {
    grid-column: span 12;
    background: var(--surface);
    border: none;
    border-radius: 16px;
    padding: 16px 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  }
  .pulse-odometer {
    display: flex;
    gap: 4px;
    align-items: center;
  }
  .digit-box {
    background: #090A0C;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    width: 30px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    font-family: monospace;
    text-shadow: 0 0 4px rgba(255,255,255,0.2);
  }

  .pulse-card {
    background: var(--surface);
    border: none;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 140px;
  }
  .pulse-card:hover {
    transform: translateY(-2px);
  }
  .pulse-card-top {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
  }
  .pulse-circle {
    position: relative;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
  }
  .pulse-circle svg {
    width: 80px;
    height: 80px;
    transform: rotate(-90deg);
  }
  .pulse-circle circle {
    fill: none;
    stroke-width: 6;
    cx: 40;
    cy: 40;
    r: 35;
  }
  .pulse-circle circle.bg {
    stroke: rgba(255, 255, 255, 0.06);
  }
  .pulse-circle circle.fill {
    stroke-linecap: round;
    stroke-dasharray: 220;
    stroke-dashoffset: 220;
    transition: stroke-dashoffset 0.8s ease-out;
  }
  .pulse-pct {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
  }
  .pulse-desc {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
    text-align: left;
  }
  .pulse-title {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.3px;
  }
  .pulse-subtitle {
    font-size: 11px;
    color: var(--muted);
    font-weight: 500;
  }
  .pulse-metric {
    font-size: 15px;
    font-weight: 800;
    margin-top: 2px;
  }
  .pulse-card-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 12px;
    padding-top: 8px;
    font-size: 11px;
    color: var(--muted);
    font-weight: 500;
    text-align: left;
  }

  .pulse-card-stat {
    background: var(--surface);
    border: none;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-height: 100px;
    text-align: left;
  }
  .pulse-stat-val {
    font-size: 22px;
    font-weight: 600;
    color: #fff;
    line-height: 1.1;
  }
  .pulse-stat-lbl {
    font-size: 10px;
    font-weight: 800;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 6px;
  }
  .pulse-stat-sub {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 2px;
    font-weight: 500;
  }
  .ticker-wrap {
    background: rgba(245, 130, 32, 0.06);
    border: 1px solid rgba(245, 130, 32, 0.15);
    border-radius: 12px;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  }
  .ticker-label {
    font-size: 10px;
    font-weight: 800;
    color: var(--brand);
    text-transform: uppercase;
    letter-spacing: 1px;
    background: rgba(245, 130, 32, 0.12);
    padding: 3px 6px;
    border-radius: 4px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 3px;
  }
  .ticker-text-container {
    flex: 1;
    overflow: hidden;
    position: relative;
    height: 16px;
  }
  .ticker-text {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: absolute;
    width: 100%;
    line-height: 16px;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .feed-card {
    background: var(--surface);
    border: none;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 18px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15);
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.25s ease, background 0.25s ease;
  }
  .feed-card:hover {
    background: var(--surface2);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.25);
  }
  .feed-card.type-milestone {
    border-left: 2.5px solid rgba(255, 208, 0, 0.5);
  }
  .feed-card.type-milestone:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.2), 0 0 15px rgba(255, 208, 0, 0.08);
  }
  .feed-card.type-achievement {
    border-left: 2.5px solid rgba(245, 130, 32, 0.5);
  }
  .feed-card.type-achievement:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.2), 0 0 15px rgba(245, 130, 32, 0.08);
  }
  .feed-card.type-broadcast {
    border-left: 2.5px solid rgba(167, 139, 250, 0.5);
  }
  .feed-card.type-broadcast:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.2), 0 0 15px rgba(167, 139, 250, 0.08);
  }
  .feed-card.type-activity {
    border-left: 2.5px solid rgba(16, 185, 129, 0.5);
  }
  .feed-card.type-activity:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.2), 0 0 15px rgba(16, 185, 129, 0.08);
  }
  /* Time of Day Custom Feeds */
  .feed-card.type-activity.time-morning {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.04) 0%, var(--surface) 100%);
    border: none;
    border-left: 2.5px solid rgba(251, 191, 36, 0.5);
  }
  .feed-card.type-activity.time-morning:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.2), 0 0 15px rgba(251, 191, 36, 0.08);
  }
  .feed-card.type-activity.time-evening {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.04) 0%, var(--surface) 100%);
    border: none;
    border-left: 2.5px solid rgba(236, 72, 153, 0.5);
  }
  .feed-card.type-activity.time-evening:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.2), 0 0 15px rgba(236, 72, 153, 0.08);
  }
  .feed-card.type-activity.time-night {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.04) 0%, var(--surface) 100%);
    border: none;
    border-left: 2.5px solid rgba(96, 165, 250, 0.5);
  }
  .feed-card.type-activity.time-night:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.3), 0 0 15px rgba(96, 165, 250, 0.08);
    border-color: rgba(96, 165, 250, 0.22);
  }
  .feed-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
  }
  .feed-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 208, 0, 0.1);
    border: 1px solid rgba(255, 208, 0, 0.25);
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 4px rgba(255, 208, 0, 0.25));
  }
  .feed-card.type-achievement .feed-card-icon {
    background: rgba(245, 130, 32, 0.1);
    border-color: rgba(245, 130, 32, 0.25);
    color: var(--brand);
    filter: drop-shadow(0 0 4px rgba(245, 130, 32, 0.25));
  }
  .feed-card.type-broadcast .feed-card-icon {
    background: rgba(167, 139, 250, 0.1);
    border-color: rgba(167, 139, 250, 0.25);
    color: var(--purple);
    filter: drop-shadow(0 0 4px rgba(167, 139, 250, 0.25));
  }
  .feed-card-meta {
    flex: 1;
    min-width: 0;
  }
  .feed-card-title {
    font-size: var(--fs-md);
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.1px;
  }
  .feed-card-time {
    font-size: var(--fs-sm);
    color: var(--muted);
    margin-top: 1px;
  }
  .feed-card-body {
    font-size: var(--fs-base);
    line-height: 1.5;
    color: rgba(255,255,255,0.8);
    margin-bottom: 14px;
    word-wrap: break-word;
    white-space: pre-line;
  }
  .feed-card-body strong {
    color: #fff;
    font-weight: 600;
  }

  .feed-card-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 12px;
    margin-top: 12px;
  }
  .feed-react-btn {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 6px 12px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: var(--font);
    transition: all 0.2s ease;
    user-select: none;
  }
  .feed-react-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: #fff;
  }
  .feed-react-btn:hover .reaction-fa {
    transform: scale(1.1);
  }
  .feed-react-btn .reaction-fa {
    font-size: 14px;
    display: inline-block;
    transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.15s ease;
  }
  .feed-react-btn:active {
    transform: scale(0.95);
  }
  .feed-react-btn.active.type-like {
    color: #3b82f6; /* Blue for Thumb */
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.25);
  }
  .feed-react-btn.active.type-heart {
    color: #ef4444; /* Red for Heart */
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.25);
  }
  .feed-react-btn .count {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
  }

  .reactions-avatar-pile {
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .reactions-avatar-pile:hover {
    opacity: 0.85;
    transform: scale(1.03);
  }
  .reactions-avatar-pile:active {
    transform: scale(0.97);
  }

  /* Activity Feed Styles */
  .feed-card-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(245, 130, 32,0.1);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
    border: 1px solid rgba(245, 130, 32,0.25);
    box-shadow: 0 0 8px rgba(245, 130, 32, 0.12);
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  .feed-card-athlete-name {
    font-size: var(--fs-md);
    font-weight: 700;
    color: #fff;
  }
  .feed-card-activity-info {
    margin-bottom: 12px;
    padding: 2px 0;
  }
  .feed-card-activity-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
  }
  .feed-card-activity-title-row .sport-icon {
    font-size: 16px;
  }
  .feed-card-activity-title-row .activity-title {
    font-size: 16.5px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: color 0.15s ease;
  }
  .feed-card-activity-title-row .activity-title:hover {
    color: var(--brand);
    text-decoration: underline;
  }
  .feed-card-activity-desc {
    font-size: var(--fs-base);
    color: var(--muted);
    font-style: italic;
    margin-bottom: 10px;
    line-height: 1.4;
    white-space: pre-line;
  }
  .activity-appreciation-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    border-left: 3px solid var(--brand);
    border-radius: 0;
    padding: 4px 12px;
    margin-top: 6px;
    margin-bottom: 8px;
  }
  .activity-appreciation-badge .appreciation-icon {
    font-size: 14px;
    flex-shrink: 0;
  }
  .activity-appreciation-badge .appreciation-text {
    font-size: 12px;
    font-style: italic;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.4;
  }
  .feed-card-map-wrap .leaflet-container {
    background: #282e36 !important;
    outline: none;
  }
  img.leaflet-tile.app-map-tile {
    filter: brightness(1.35) contrast(0.92) saturate(0.4) hue-rotate(12deg) !important;
  }
  
  /* Activity Detail Modal Slide-up Overlay */
  .detail-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    background: linear-gradient(180deg, #1f262d 0%, #0e1115 100%);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    z-index: 10000;
    transform: translateX(100%);
    transition: transform 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow-y: auto;
    padding-bottom: 40px;
  }
  .glass-card {
    background: var(--surface);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
  }
  .glass-metric-box {
    background: var(--surface2);
    border-radius: 14px;
    padding: 12px 10px;
    transition: transform 0.2s ease, background-color 0.2s ease;
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2);
  }
  .glass-metric-box:hover {
    border-color: rgba(245, 130, 32, 0.3);
    background: rgba(255, 255, 255, 0.04);
    transform: translateY(-2px);
  }
  .glass-section-title {
    font-size: 10px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin: 18px 0 10px;
  }
  .prof-recent-act-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  }
  .prof-recent-act-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(245, 130, 32, 0.35);
    transform: translateY(-2.5px);
  }
  .prof-recent-act-card:active {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(245, 130, 32, 0.5);
  }

  .detail-modal.open {
    transform: translateX(0);
  }
  .detail-map-wrap {
    width: 100%;
    height: 250px;
    position: relative;
    background: #282e36;
  }
  .detail-content {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px 16px;
  }
  .detail-fields-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 20px;
  }
  .detail-field-item {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 12px 14px;
    transition: border-color 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
  }
  .detail-field-item:hover {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.03);
    transform: translateY(-2px);
  }
  .detail-field-label {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.8px;
  }
  .detail-field-val {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin-top: 4px;
  }
  .detail-badge-container {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
  }
  .detail-badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--muted);
  }
  .detail-badge.brand {
    background: rgba(245, 130, 32, 0.12);
    border-color: rgba(245, 130, 32, 0.25);
    color: var(--brand);
  }
  .detail-metrics-title {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255,255,255,0.8);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 6px;
  }
  .detail-desc-card {
    background: var(--surface);
    border-left: 3px solid var(--brand);
    border-radius: 0 12px 12px 0;
    padding: 12px 14px;
    margin-bottom: 14px;
  }
  .detail-desc-title {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 6px;
  }
  .detail-desc-text {
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.5;
    font-style: italic;
  }
  .detail-hero-card {
    background: linear-gradient(135deg, var(--surface) 0%, var(--surface2) 100%);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 14px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
  }
  .detail-hero-val {
    font-size: 32px;
    font-weight: 600;
    color: #fff;
    line-height: 1;
  }
  .detail-hero-label {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-top: 6px;
  }
  .detail-trend-pill {
    display: flex;
    align-items: center;
    gap: 4px;
    border-radius: 20px;
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 700;
  }
  .detail-trend-pill.up {
    background: rgba(34,197,94,0.12);
    border: 1px solid rgba(34,197,94,0.25);
    color: var(--green);
  }
  .detail-trend-pill.down {
    background: rgba(226,75,74,0.12);
    border: 1px solid rgba(226,75,74,0.25);
    color: #E24B4A;
  }
  .detail-milestone-card {
    background: var(--surface);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
  }
  .detail-keystats-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin-bottom: 14px;
    padding-bottom: 2px;
  }
  .detail-keystat-card {
    background: var(--surface);
    border-radius: 12px;
    padding: 10px 12px;
    min-width: 84px;
    flex-shrink: 0;
  }
  .detail-keystat-val {
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    margin-top: 6px;
  }
  .detail-keystat-label {
    color: rgba(255,255,255,0.4);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-top: 1px;
  }
  .detail-chart-card {
    background: var(--surface);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 16px;
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
  }
  .splits-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: var(--text);
  }
  .splits-table th {
    padding: 8px 0;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .splits-table td {
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  .splits-table tr:last-child td {
    border-bottom: none;
  }
  .feed-card-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 12px;
    padding: 8px 4px;
    background: var(--surface2);
    border-radius: 10px;
  }
  .feed-card-stats-grid .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 3px;
    padding: 2px 0;
  }
  .feed-card-stats-grid .stat-item:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.05);
  }
  .feed-card-stats-grid .stat-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--muted);
    font-weight: 700;
  }
  .feed-card-stats-grid .stat-val {
    font-size: 19px;
    font-weight: 600;
    color: #fff;
  }
  .feed-card-stats-grid .stat-unit {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--muted);
    font-weight: 700;
    margin-top: 1px;
  }

  /* Profile Drawer CSS classes */
  .profile-avatar-large {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 800;
    margin: 8px auto 12px auto;
    border: 2.5px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  }
  .profile-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 24px;
  }
  .profile-stat-card {
    background: var(--surface);
    border-radius: 12px;
    padding: 12px 4px;
    text-align: center;
    transition: border-color 0.2s ease, transform 0.2s ease;
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
  }
  .profile-stat-card:hover {
    border-color: rgba(245, 130, 32, 0.3);
    transform: translateY(-2px);
  }
  .profile-stat-card .val {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
  }
  .profile-stat-card .lbl {
    font-size: 11.5px;
    font-weight: 700;
    color: rgba(255,255,255,0.8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
  }
  .prof-pb-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 24px;
  }
  .prof-pb-card {
    background: var(--surface);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s ease, transform 0.2s ease;
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
  }
  .prof-pb-card:hover {
    border-color: rgba(245, 130, 32, 0.3);
    transform: translateY(-2px);
  }
  .prof-pb-card .lbl {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255,255,255,0.8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .prof-pb-card .val {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    margin-top: 3px;
  }
  .prof-pb-card .sub {
    font-size: 10.5px;
    color: var(--muted);
    margin-top: 2px;
  }

  /* ── Date Details View Screen ── */
  #date-details-view {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    background: var(--bg);
    z-index: 10100;
    transform: translate3d(100%, 0, 0);
    transition: transform 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow-y: auto;
    padding: max(14px, env(safe-area-inset-top)) 20px 90px;
  }
  #date-details-view.visible {
    transform: translate3d(0, 0, 0);
  }

  .details-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    position: sticky;
    top: 0;
    background: var(--bg);
    padding: 10px 0;
    z-index: 10;
  }
  .details-hdr .icon-btn {
    display: flex;
    align-items: center;
    color: var(--muted);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 12px 8px 0;
    border-radius: 8px;
  }
  .details-hdr .icon-btn:active {
    color: #fff;
  }
  .details-hdr .icon-btn svg {
    margin-right: 6px;
  }
  #details-date-title {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    white-space: nowrap;
  }

  /* Collapsible Activity Cards styling */
  .detail-act-card {
    background: var(--surface);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
  }
  .detail-act-card.flagged {
    background: rgba(239, 68, 68, 0.04);
    border-color: rgba(239, 68, 68, 0.25);
    border-left: 3px solid #ef4444;
    box-shadow: 0 4px 20px rgba(239, 68, 68, 0.05);
  }
  .detail-act-card.flagged .detail-act-hdr:active {
    background: rgba(239, 68, 68, 0.06);
  }
  .detail-act-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    cursor: pointer;
    user-select: none;
    background: rgba(255,255,255,0.01);
  }
  .detail-act-hdr:active {
    background: rgba(255,255,255,0.03);
  }
  .detail-act-hdr-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
  }
  .detail-act-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
  }
  .detail-act-icon.walk { background: rgba(34,197,94,0.15); color: var(--green); }
  .detail-act-icon.run { background: rgba(245, 130, 32,0.15); color: var(--brand); }
  .detail-act-icon.hike { background: rgba(167,139,250,0.15); color: var(--purple); }
  .detail-act-icon.ride { background: rgba(96,165,250,0.15); color: var(--blue); }

  .detail-act-title-wrap {
    min-width: 0;
    flex: 1;
  }
  .detail-act-name {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .detail-act-sub {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .detail-act-hdr-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    margin-left: 12px;
  }
  .detail-act-chevron {
    font-size: 12px;
    color: var(--muted);
    transition: transform 0.25s ease;
  }

  .detail-act-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease-out;
    padding: 0 16px;
  }

  .detail-act-card.open .detail-act-body {
    max-height: 1000px;
    padding-bottom: 20px;
  }
  .detail-act-card.open .detail-act-chevron {
    transform: rotate(180deg);
  }

  .detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding-top: 8px;
  }
  .detail-item {
    display: flex;
    flex-direction: column;
  }
  .detail-label {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255,255,255,0.8);
    text-transform: uppercase;
    letter-spacing: 0.8px;
  }
  .detail-value {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin-top: 4px;
    word-break: break-word;
  }
  .detail-divider {
    height: 1px;
    background: var(--border);
    margin: 16px 0;
  }
  .detail-status-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
  }
  .status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    align-self: flex-start;
  }
  .status-badge.valid {
    background: var(--green-dim);
    color: var(--green);
    border: 1px solid rgba(34,197,94,0.2);
  }
  .status-badge.invalid {
    background: rgba(239,68,68,0.12);
    color: #ef4444;
    border: 1px solid rgba(239,68,68,0.2);
  }
  .flag-reason-text {
    font-size: 13px;
    font-weight: 600;
    color: #ef4444;
    margin-top: 4px;
    background: rgba(239,68,68,0.06);
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px dashed rgba(239,68,68,0.15);
    word-break: break-word;
  }
  /* Toggle Switch */
  .toggle-switch input:checked + .toggle-slider {
    background-color: #10b981 !important;
  }
  .toggle-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
  }
  .toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(18px);
  }
  @keyframes splashPulse{
    0%,100%{opacity:0.9;transform:scale(1);}
    50%{opacity:1;transform:scale(1.025);}
  }
  .splash-logo-wrap{
    display:flex;align-items:center;justify-content:center;
  }
  .splash-dots{
    display:flex;align-items:center;justify-content:center;gap:8px;height:28px;
  }
  .splash-dot{
    width:9px;height:9px;background:#fff;border-radius:50%;
    animation:splashDotBounce 1s ease-in-out infinite;
  }
  @keyframes splashDotBounce{
    0%,80%,100%{transform:scale(0.6);opacity:0.4;}
    40%{transform:scale(1);opacity:1;}
  }

  .athlete-profile-link, .activity-detail-link {
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    transition: color 0.15s ease;
  }
  .athlete-profile-link:hover, .activity-detail-link:hover {
    color: var(--brand);
    text-decoration: underline;
  }

  .feed-card {
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease !important;
  }
  .feed-card:hover {
    transform: translateY(-2px);
    border-color: rgba(245, 130, 32, 0.25) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  }

  .push-icon-square {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(34, 197, 94, 0.12);
    color: #22C55E;
  }

  /* Prevent browser default pull-to-refresh on scroll containers */
  .content {
    overscroll-behavior-y: contain;
    position: relative;
  }

  /* Pull to Refresh Premium Glassmorphic Indicator */
  .pull-refresh-indicator {
    position: fixed;
    top: 66px; /* Below the main sticky header */
    left: 50%;
    transform: translate(-50%, -100px) scale(0.3);
    opacity: 0;
    z-index: 1000;
    pointer-events: none;
    transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.15s ease;
  }
  .pull-refresh-indicator.visible {
    opacity: 1;
  }
  .pull-refresh-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(40, 46, 54, 0.8);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .pull-refresh-spinner {
    width: 22px;
    height: 22px;
    color: var(--brand);
    transform: rotate(0deg);
  }
  .pull-refresh-spinner circle {
    stroke-linecap: round;
    transition: stroke-dashoffset 0.1s linear;
  }
  .pull-refresh-indicator.refreshing .pull-refresh-spinner {
    animation: pr-spin 0.8s linear infinite;
  }
  @keyframes pr-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  /* Infinite Scroll Bottom Spinner */
  .feed-spinner-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 0 24px;
    width: 100%;
  }
  .feed-infinite-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(255, 255, 255, 0.08);
    border-top: 3px solid var(--brand);
    border-radius: 50%;
    animation: pr-spin 0.8s linear infinite;
  }




/* ===== Events Tab ===== */
.ev-tab-head{font-size:22px;font-weight:700;color:#fff;margin:6px 0 16px}
.ev-section-title{font-size:13px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#fff;margin:20px 0 10px}
.ev-card-p{background:var(--surface);border:none;border-radius:var(--radius);margin-bottom:14px;overflow:hidden;position:relative;box-shadow:0 4px 15px rgba(0,0,0,0.1);}
.ev-card-watermark {
  position: absolute;
  bottom: -15px;
  right: -15px;
  width: 140px;
  height: 140px;
  pointer-events: none;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.045;
}
.ev-card-watermark svg {
  width: 130px !important;
  height: 130px !important;
}
.ev-card-sport-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}
.ev-card-sport-badge svg {
  width: 16px;
  height: 16px;
  color: var(--brand);
}
.ev-card-p.has-badge .ev-pill {
  margin-right: 40px;
}
.ev-banner{width:100%;height:110px;object-fit:cover;display:block}
.ev-card-body{padding:16px;position:relative;z-index:1;}
.ev-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ev-card-name{font-size:17px;font-weight:600;color:#fff}
.ev-pill{font-size:10px;font-weight:600;letter-spacing:.5px;padding:3px 10px;border-radius:20px;white-space:nowrap}
.ev-pill-live{background:rgba(34,197,94,.15);color:#4ADE80}
.ev-pill-enrolled{background:rgba(34,197,94,.15);color:#4ADE80}
.ev-pill-registered{background:rgba(245, 130, 32,.15);color:#F97D4E}
.ev-card-dates{font-size:12.5px;color:rgba(255,255,255,.55);margin-top:5px}
.ev-card-desc{font-size:13px;color:rgba(255,255,255,.7);margin-top:8px;line-height:1.45}
.ev-card-stats{font-size:12px;color:rgba(255,255,255,.5);margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.07)}
.ev-card-actions{display:flex;gap:10px;margin-top:12px}
.ev-btn{flex:1;padding:11px;border:1px solid rgba(255,255,255,0.08);border-radius:12px;background:rgba(255,255,255,0.06);color:#fff;font-size:13.5px;font-weight:600;font-family:inherit;cursor:pointer;transition:all 0.2s ease;}
.ev-btn:hover{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.15);}
.ev-btn-info{background:linear-gradient(135deg, rgba(56,189,248,0.15) 0%, rgba(56,189,248,0.05) 100%);border:1px solid rgba(56,189,248,0.3);color:#38bdf8;}
.ev-btn-info:hover{background:linear-gradient(135deg, rgba(56,189,248,0.25) 0%, rgba(56,189,248,0.1) 100%);border-color:rgba(56,189,248,0.45);color:#fff;}
.ev-btn-leaderboard{background:linear-gradient(135deg, rgba(251,191,36,0.15) 0%, rgba(251,191,36,0.05) 100%);border:1px solid rgba(251,191,36,0.3);color:#fbbf24;}
.ev-btn-leaderboard:hover{background:linear-gradient(135deg, rgba(251,191,36,0.25) 0%, rgba(251,191,36,0.1) 100%);border-color:rgba(251,191,36,0.45);color:#fff;}
.ev-btn-primary, .ev-btn-registered{background:linear-gradient(135deg, rgba(245, 130, 32,0.2) 0%, rgba(245, 130, 32,0.08) 100%);border:1px solid rgba(245, 130, 32,0.4);color:#ffaa80;box-shadow:0 4px 12px rgba(245, 130, 32,0.15);transition:all 0.2s ease;}
.ev-btn-primary:hover, .ev-btn-registered:hover{background:linear-gradient(135deg, rgba(245, 130, 32,0.3) 0%, rgba(245, 130, 32,0.12) 100%);border-color:rgba(245, 130, 32,0.5);color:#fff;box-shadow:0 6px 16px rgba(245, 130, 32,0.25);}
.ev-btn-register{background:linear-gradient(135deg, rgba(16,185,129,0.2) 0%, rgba(16,185,129,0.08) 100%);border:1px solid rgba(16,185,129,0.4);color:#a7f3d0;box-shadow:0 4px 12px rgba(16,185,129,0.15);transition:all 0.2s ease;}
.ev-btn-register:hover{background:linear-gradient(135deg, rgba(16,185,129,0.3) 0%, rgba(16,185,129,0.12) 100%);border-color:rgba(16,185,129,0.5);color:#fff;box-shadow:0 6px 16px rgba(16,185,129,0.25);}

@media (max-width: 480px) {
  .ev-card-actions {
    flex-wrap: wrap;
    gap: 8px;
  }
  .ev-btn {
    flex: 1 1 calc(50% - 4px);
    font-size: 12px;
    padding: 8px 4px;
    height: 38px !important;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .ev-card-actions:has(.ev-btn:nth-child(3)) .ev-btn-primary {
    flex: 1 1 100%;
  }
}
.ev-spectator-note{font-size:12px;color:#F97D4E;margin-top:10px;font-weight:500}
.ev-empty{text-align:center;color:rgba(255,255,255,.4);padding:50px 20px;font-size:14px}
.ev-skel{height:120px;border-radius:16px;background:linear-gradient(90deg,#1E2230 25%,#262c3a 50%,#1E2230 75%);background-size:200% 100%;animation:evshimmer 1.4s infinite;margin-bottom:14px}
@keyframes evshimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── Login (hero + glass card, matching connect-strava.html) ── */
#login-screen{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:max(32px,env(safe-area-inset-top)) 24px max(32px,env(safe-area-inset-bottom));position:relative;overflow:hidden}
#login-screen::before{content:'';position:fixed;top:-160px;left:50%;transform:translateX(-50%);width:520px;height:520px;background:radial-gradient(circle,rgba(245, 130, 32,0.13) 0%,transparent 65%);pointer-events:none}
.login-card{width:100%;max-width:360px;display:flex;flex-direction:column;align-items:center;position:relative;z-index:1}
.login-logo{width:min(120px,40vw);margin:0 auto 20px}
.login-logo img{width:100%;height:auto;object-fit:contain}
.login-logo .fallback{width:72px;height:72px;border-radius:20px;background:var(--brand);display:flex;align-items:center;justify-content:center;font-size:32px;margin:0 auto}
.login-title{font-size:clamp(20px, 6.2vw, 26px);font-weight:900;text-align:center;line-height:1.2;letter-spacing:-0.5px;margin-bottom:8px;white-space:nowrap;}
.login-sub{font-size:var(--fs-xs);color:rgba(255,255,255,0.4);text-align:center;line-height:1.5;margin-bottom:24px;max-width:280px}
.login-glass{width:100%;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.09);border-radius:18px;padding:24px 20px 20px}
.login-field-label{display:block;font-size:var(--fs-xs);font-weight:600;color:rgba(255,255,255,0.35);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:7px}
.login-field{width:100%;padding:13px 15px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:11px;color:#fff;font-size:var(--fs-md);font-weight:500;font-family:inherit;margin-bottom:0;outline:none;transition:border-color .15s}
.login-field:focus{border-color:rgba(245, 130, 32,0.6)}
.login-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:15px;margin-top:16px;background:var(--brand);border:none;border-radius:12px;color:#fff;font-size:var(--fs-md);font-weight:600;font-family:inherit;cursor:pointer;box-shadow:0 4px 20px rgba(245, 130, 32,0.28);transition:transform .12s}
.login-btn:active{transform:scale(0.97)}
.login-btn:disabled{opacity:.5;cursor:not-allowed}
.login-err{color:#fca5a5;background:rgba(220,38,38,.1);border:1px solid rgba(220,38,38,.18);border-radius:11px;font-size:var(--fs-sm);line-height:1.6;text-align:center;padding:0;min-height:0;margin:0;overflow:hidden;max-height:0;transition:all .2s}
.login-err:not(:empty){padding:12px 14px;margin-top:14px;max-height:100px}
.login-hint{font-size:var(--fs-xs);color:rgba(255,255,255,0.16);text-align:center;margin-top:18px;line-height:1.8}
.otp-boxes{display:flex;gap:8px;justify-content:center;margin-bottom:4px}
.otp-box{width:46px;height:54px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:11px;color:#fff;font-size:22px;font-weight:700;text-align:center;font-family:inherit}
.otp-box:focus{outline:none;border-color:rgba(245, 130, 32,0.6)}
.login-field-hint{font-size:var(--fs-xs);color:rgba(255,255,255,0.35);text-align:center;margin-bottom:14px}
.login-resend-row{margin-top:14px;text-align:center;font-size:var(--fs-sm);color:rgba(255,255,255,0.4)}
.login-link{background:none;border:none;color:var(--brand);font-weight:600;font-size:var(--fs-sm);font-family:inherit;cursor:pointer;padding:0}
.login-terms{font-size:var(--fs-xs);color:rgba(255,255,255,0.4);margin-top:20px;line-height:1.5;text-align:center}
.login-terms a{color:var(--brand);text-decoration:none;font-weight:500}
.login-footnote{margin-top:18px;font-size:var(--fs-xs);color:rgba(255,255,255,0.16);text-align:center;line-height:2}
.login-footnote span{color:rgba(255,255,255,0.1);margin:0 4px}

/* FOUC login overrides */
#app-screen {
  display: none;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  width: 100%;
}
html:not(.app-logged-in) #app-screen { display: none !important; }
html.app-logged-in #login-screen { display: none !important; }
html.app-logged-in #app-screen { display: flex !important; }

/* Employee Mode Background Styles */
body.employee-mode {
  background: radial-gradient(circle at 10% 20%, rgba(245, 130, 32, 0.09) 0%, rgba(0, 0, 0, 0) 40%),
              radial-gradient(circle at 90% 80%, rgba(245, 130, 32, 0.07) 0%, rgba(0, 0, 0, 0) 50%),
              #0E1012 !important;
}

body.employee-mode::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: 
    radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 0),
    radial-gradient(rgba(245, 130, 32, 0.12) 1.5px, transparent 0);
  background-size: 40px 40px, 60px 60px;
  background-position: 0 0, 20px 20px;
  opacity: 0.25;
  z-index: -1;
}

/* Redesigned Profile Name Card with Celebration Background */
.tab-you-profile {
  position: relative;
  background: var(--surface) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  padding: 24px 20px !important;
  margin-bottom: 12px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
  overflow: hidden;
}

/* Subtle decorative celebration background dots (like confetti) */
.tab-you-profile::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(rgba(245, 130, 32, 0.18) 1.5px, transparent 0),
    radial-gradient(rgba(244, 114, 182, 0.15) 1.5px, transparent 0);
  background-size: 30px 30px, 45px 45px;
  background-position: 0 0, 15px 15px;
  opacity: 0.65;
  pointer-events: none;
  z-index: 0;
}

/* Glass glow overlay for a premium look */
.tab-you-profile::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(245, 130, 32, 0.09) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* Ensure contents display above background */
.tab-you-profile > * {
  position: relative !important;
  z-index: 1 !important;
}

/* ── Embedded PWA Iframe Styles ── */
.is-embedded .header,
.is-embedded .bottom-nav {
  display: none !important;
}
.is-embedded #app-screen {
  padding-top: 0 !important;
  height: 100dvh !important;
}
.is-embedded .content {
  height: 100dvh !important;
  padding-bottom: 20px !important;
}

/* ==========================================================================
   ─── Dashboard Tab Interactive Detail Modals & Custom Visualizations ───
   ========================================================================== */
.dash-modal-card {
  background: var(--surface);
  border: none;
  border-radius: 20px;
  padding: 24px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  position: relative;
  animation: modalZoomIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalZoomIn {
  from { transform: scale(0.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.dash-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.45);
  font-size: 20px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.dash-modal-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
#dash-modal-header {
  margin-bottom: 20px;
  padding-right: 28px;
}
#dash-modal-title {
  font-size: 19px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.3px;
}
#dash-modal-subtitle {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 3px;
}
#dash-modal-body {
  max-height: 70dvh;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* Custom Visualizations: Bar Charts */
.db-chart-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 140px;
  margin-top: 15px;
  padding: 10px 4px 5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.db-chart-bar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  gap: 6px;
}
.db-chart-bar-val {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.db-chart-bar-wrap:hover .db-chart-bar-val {
  opacity: 1;
}
.db-chart-bar {
  width: min(16px, 4vw);
  background: linear-gradient(180deg, var(--brand) 0%, rgba(245, 130, 32, 0.2) 100%);
  border-radius: 4px 4px 0 0;
  min-height: 4px;
  transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(245, 130, 32, 0.2);
}
.db-chart-bar.highlighted {
  background: linear-gradient(180deg, #10b981 0%, rgba(16, 185, 129, 0.2) 100%);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}
.db-chart-bar-lbl {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 600;
}

/* Custom Visualizations: Walk vs Run segments */
.db-seg-chart {
  margin-top: 15px;
}
.db-seg-label-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 6px;
}
.db-seg-bar-track {
  height: 10px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 5px;
  overflow: hidden;
  display: flex;
}
.db-seg-fill {
  height: 100%;
  transition: width 0.4s ease;
}

/* Custom Visualizations: Ledger */
.ledger-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ledger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  transition: background 0.2s ease;
}
.ledger-row:hover {
  background: rgba(255, 255, 255, 0.06);
}
.ledger-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ledger-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
}
.ledger-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
}
.ledger-val {
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

/* Custom Visualizations: Streak Calendar Grid */
.calendar-grid-container {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-top: 15px;
  padding: 4px;
}
.calendar-day-header {
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.35);
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.calendar-grid-cell {
  aspect-ratio: 1;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.2s ease;
}
.calendar-grid-cell.active-day {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.25) 0%, rgba(16, 185, 129, 0.08) 100%);
  border-color: rgba(16, 185, 129, 0.4);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.1);
}
.calendar-grid-cell.active-day:hover {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.4) 0%, rgba(16, 185, 129, 0.15) 100%);
  border-color: rgba(16, 185, 129, 0.6);
}
.calendar-grid-cell.future-day {
  opacity: 0.25;
  cursor: not-allowed;
}
.calendar-day-num {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}
.calendar-day-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #10b981;
  position: absolute;
  bottom: 6px;
}
.calendar-grid-cell.active-day .calendar-day-num {
  color: #a7f3d0;
}

#tab-dashboard {
  padding-top: 4px;
}

#tab-dashboard .hero-rings-block {
  padding-top: 0;
}

/* Pull to Refresh styles */
.ptr-loader {
  position: fixed;
  top: 56px; /* below the header */
  left: 50%;
  transform: translate3d(-50%, -60px, 0);
  width: 40px;
  height: 40px;
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.ptr-loader.visible {
  opacity: 1;
}
.ptr-loader.transitioning {
  transition: transform 0.22s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.15s ease;
}
.ptr-spinner-svg {
  width: 22px;
  height: 22px;
  transform: rotate(0deg);
  transform-origin: center;
  will-change: transform;
}
.ptr-spinner-circle {
  fill: none;
  stroke: var(--brand);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  transform-origin: center;
}
.ptr-loader.loading .ptr-spinner-svg {
  animation: ptr-spin 0.8s linear infinite;
}
.ptr-loader.loading .ptr-spinner-circle {
  stroke-dasharray: 60;
  stroke-dashoffset: 15;
  transition: stroke-dashoffset 0.15s ease;
}
@keyframes ptr-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

    /* ═══ Unified Medal Arc (WHOOP hybrid redesign, Phase 2) ═══ */
    .hero-arc-svgbox{position:relative;width:280px;max-width:88vw;margin:0 auto;}
    .hero-arc-svgbox svg{width:100%;height:auto;overflow:visible;display:block;}
    .hero-arc-bg{fill:none;stroke:rgba(255,255,255,0.07);stroke-width:12;stroke-linecap:round;}
    .hero-arc-fg{fill:none;stroke:var(--brand);stroke-width:12;stroke-linecap:round;
      filter:drop-shadow(0 0 12px rgba(245, 130, 32,0.4));
      transition:stroke-dashoffset 1.2s cubic-bezier(0.25,0.8,0.25,1);}
    .hero-arc-tick{stroke-width:3;stroke-linecap:round;}
    .hero-arc-center{position:absolute;left:0;right:0;bottom:4px;text-align:center;pointer-events:none;}
    .hero-arc-big{font-size:52px;font-weight:800;line-height:.95;letter-spacing:-1px;color:var(--text);}
    .hero-arc-big small{font-size:19px;font-weight:600;color:var(--muted);letter-spacing:0;}
    .hero-arc-lbl{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);font-weight:600;margin-top:5px;}
    .hero-arc-legend{display:flex;justify-content:center;gap:18px;margin-top:12px;flex-wrap:wrap;}
    .hero-arc-ml{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);font-weight:600;}
    .hero-arc-ml i{width:8px;height:8px;border-radius:50%;display:inline-block;}
    .hero-next{margin:16px 0 12px;background:var(--surface);border:none;border-radius:16px;
      padding:14px 16px;display:flex;align-items:center;gap:13px;}
    .hero-next-ic{width:40px;height:40px;flex:0 0 40px;border-radius:12px;background:rgba(200,216,232,0.1);
      display:flex;align-items:center;justify-content:center;font-size:19px;}
    .hero-next-txt{flex:1;min-width:0;}
    .hero-next-t{font-size:13.5px;font-weight:700;color:var(--text);}
    .hero-next-s{font-size:11.5px;color:var(--muted);margin-top:2px;}
    .hero-next-pct{font-size:20px;font-weight:800;color:var(--silver);}

    /* ═══ Phase 2b: day strip, stat chips, week-goal bars ═══ */
    .day-strip{display:flex;gap:6px;margin:0 auto 14px;max-width:360px;justify-content:center;}
    .day-cell{flex:1;max-width:48px;text-align:center;padding:7px 0 9px;border-radius:12px;}
    .day-cell.today{background:var(--surface);}
    .day-cell .dw{font-size:8.5px;letter-spacing:1.4px;color:rgba(255,255,255,0.3);text-transform:uppercase;font-weight:700;}
    .day-cell .dn{font-size:15px;font-weight:700;margin:2px 0 5px;color:var(--text);}
    .day-cell svg{width:20px;height:20px;display:block;margin:0 auto;}
    .day-ring-bg{fill:none;stroke:rgba(255,255,255,0.10);stroke-width:2.5;}
    .day-ring-fg{fill:none;stroke:var(--brand);stroke-width:2.5;stroke-linecap:round;}
    .stat-chips{display:flex;gap:10px;margin:0 0 12px;}
    .stat-chip{flex:1;background:var(--surface);border:none;border-radius:16px;padding:12px 4px;text-align:center;}
    .stat-chip .scv{font-size:21px;font-weight:800;line-height:1;color:var(--text);}
    .stat-chip .scv.brand{color:var(--brand);}
    .stat-chip .scv.green{color:var(--green);}
    .stat-chip .sck{font-size:8.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);font-weight:700;margin-top:6px;}
    .streak-bars-wrap.km-bars{align-items:flex-end;height:64px;}
    .sbarw{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;height:100%;}
    .sbarw em{font-style:normal;font-size:8.5px;color:var(--green);font-weight:800;line-height:1;height:9px;}
    .sbarw .sbar{width:100%;flex:none;min-height:4px;}

    /* ═══ Phase 3: rival/rank-movement card (activates existing computed data) ═══ */
    .lb-rival-card{margin:0 20px 14px;background:var(--surface);border:1px solid var(--border);border-radius:16px;
      padding:14px 16px;display:flex;align-items:center;gap:13px;}
    .lb-rival-ic{width:38px;height:38px;flex:0 0 38px;border-radius:12px;background:rgba(245, 130, 32,0.12);
      display:flex;align-items:center;justify-content:center;font-size:17px;}
    .lb-rival-txt{flex:1;min-width:0;}
    .lb-rival-t{font-size:13.5px;font-weight:700;color:var(--text);}
    .lb-rival-s{font-size:11.5px;color:var(--muted);margin-top:2px;}

    /* ═══ Phase 4: You-tab medal shelf ═══ */
    .you-medal-shelf{display:flex;justify-content:center;gap:20px;margin-top:16px;}
    .yms-item{text-align:center;}
    .yms-ic{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;
      font-size:21px;margin:0 auto 6px;border:2px solid;}
    .yms-item.earned .yms-ic{background:rgba(244,168,74,0.12);}
    .yms-item.locked .yms-ic{background:var(--surface);border-color:var(--border);filter:grayscale(1);opacity:0.4;}
    .yms-lbl{font-size:9.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);}

    /* ═══ Phase 4b: Celebrate — redesigned Today strip (card style) ═══ */
    .tcs-wrap{margin-bottom:16px;}
    .tcs-head{font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:10px;}
    .tcs-scroll{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:none;}
    .tcs-scroll::-webkit-scrollbar{display:none;}
    .tcc-card{flex:0 0 138px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:14px 12px;text-align:center;}
    .tcc-av{width:44px;height:44px;border-radius:50%;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;font-size:19px;position:relative;overflow:hidden;}
    .tcc-av img{width:100%;height:100%;object-fit:cover;}
    .tcc-badge{position:absolute;bottom:-2px;right:-2px;font-size:13px;line-height:1;}
    .tcc-name{font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .tcc-sub{font-size:10.5px;color:var(--muted);margin:2px 0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .tcc-btn{width:100%;background:rgba(245, 130, 32,0.12);color:var(--brand);border:1px solid rgba(245, 130, 32,0.3);border-radius:99px;font-size:11px;font-weight:700;padding:6px 8px;font-family:inherit;cursor:pointer;}
    .tcc-btn:active{transform:scale(0.96);}