:root{
  --teal:#0E7C7B;--teal-dark:#0a5e5d;--teal-light:#5ed5d3;
  --orange:#FF6A3D;--orange-light:#FF8A63;
  --forest-deep:#061F18;--forest-dark:#0A3D2E;--forest-mid:#0F4F3D;
  --ink:#061F18;--paper:#F5F4F0;--line:#e6e3dc;--muted:#6b7a8f;
  --footer-h:77px;  /* shared with .footer-drawer bottom offset */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{height:100%}
body{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,#0F4F3D 0%,#0A3D2E 100%);
  background-attachment:fixed;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* BG VIDEO */
.bg-video{
  position:fixed;top:0;left:0;width:100vw;height:100vh;
  object-fit:cover;z-index:0;opacity:.75;background:#111;
  transition:opacity 1200ms ease;
}
.bg-video.is-settled{opacity:.85}
.bg-overlay{
  position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(10,61,46,.08) 0%, rgba(6,31,24,.2) 100%);
}

/* NAV */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  background:rgba(6,31,24,.45);
  border-bottom:1px solid rgba(94,213,211,.12);
}
.nav-inner{
  max-width:1240px;margin:0 auto;padding:16px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
.brand-mark{
  width:38px;height:38px;border-radius:10px;
  background:linear-gradient(135deg,var(--teal),var(--teal-dark));
  display:grid;place-items:center;color:#fff;font-weight:800;
  font-family:'Bebas Neue',sans-serif;letter-spacing:1px;font-size:20px;
  box-shadow:0 6px 16px -6px rgba(14,124,123,.6);position:relative;
}
.brand-mark::after{
  content:"";position:absolute;right:-4px;bottom:-4px;width:14px;height:14px;border-radius:50%;
  background:var(--orange);
}
.brand-text{font-weight:800;font-size:18px;letter-spacing:.5px;color:#fff}
.brand-sub{display:block;font-family:'Caveat',cursive;font-weight:500;color:var(--orange);font-size:14px;margin-top:-4px;line-height:1}
.nav-links{display:flex;align-items:center;gap:8px}
.nav-links a{
  color:#fff;text-decoration:none;font-weight:600;font-size:14px;
  padding:8px 14px;border-radius:8px;transition:.2s;
}
.nav-links a:hover{background:rgba(255,255,255,.1);color:#fff}
.nav-login{
  background:rgba(255,255,255,.12);color:#fff !important;
  border:1px solid rgba(255,255,255,.3);
  padding:9px 18px;border-radius:9px;
  font:600 13px/1 'Plus Jakarta Sans',sans-serif;
  cursor:pointer;transition:.2s;text-decoration:none;
}
.nav-login:hover{background:rgba(255,255,255,.22);border-color:#fff}
.nav-signup{
  background:var(--orange);color:#fff !important;
  border:none;padding:9px 18px;border-radius:9px;
  font:700 13px/1 'Plus Jakarta Sans',sans-serif;
  cursor:pointer;transition:transform .2s, background .2s;text-decoration:none;
}
.nav-signup:hover{transform:translateY(-1px);background:var(--orange-light)}
.user-menu{display:flex;align-items:center;gap:10px;position:relative}
.user-avatar{
  width:36px;height:36px;border-radius:50%;
  border:2px solid var(--teal-light);object-fit:cover;
  background:transparent;
}
.avatar-btn{
  background:none;border:none;padding:0;cursor:pointer;
  border-radius:50%;transition:transform .15s, box-shadow .15s;
}
.avatar-btn:hover{transform:scale(1.08);box-shadow:0 0 0 3px rgba(94,213,211,.3)}
.avatar-btn:focus-visible{outline:2px solid var(--teal-light);outline-offset:2px}
.user-name{
  color:#fff;
  font-weight:600;font-size:13px;line-height:1.2;
  max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:'Plus Jakarta Sans',sans-serif;
}

/* Avatar dropdown */
.avatar-dropdown{
  position:absolute;top:calc(100% + 10px);right:0;
  width:220px;
  background:rgba(6,31,24,.92);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border:1px solid rgba(94,213,211,.25);
  border-radius:14px;
  box-shadow:0 16px 48px -12px rgba(0,0,0,.6);
  padding:8px 0;
  opacity:0;pointer-events:none;
  transform:translateY(-6px) scale(.96);
  transition:opacity .2s ease, transform .2s ease;
  z-index:100;
}
.avatar-dropdown.is-open{
  opacity:1;pointer-events:auto;
  transform:translateY(0) scale(1);
}
.dropdown-header{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px 10px;
  border-bottom:1px solid rgba(94,213,211,.15);
  margin-bottom:4px;
}
.dropdown-pic{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid var(--teal-light);flex-shrink:0;background:rgba(255,255,255,.1)}
.dropdown-name{color:#fff;font-weight:700;font-size:13px;line-height:1.2;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dropdown-email{color:rgba(255,255,255,.5);font-size:11px;margin-top:2px;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dropdown-item{
  display:block;width:100%;text-align:left;
  padding:10px 16px;
  color:rgba(255,255,255,.85);font-size:13px;font-weight:500;
  text-decoration:none;border:none;background:none;
  cursor:pointer;transition:background .15s;
  font-family:'Plus Jakarta Sans',sans-serif;
}
.dropdown-item:hover{background:rgba(94,213,211,.12);color:#fff}
.dropdown-logout{color:var(--orange);border-top:1px solid rgba(94,213,211,.1);margin-top:4px;padding-top:12px}

/* Nav dropdown (Aktivitas) — sits inside .nav-links as the trigger,
   menu is absolutely positioned below it. Reuses the same visual
   language as .avatar-dropdown but is wider and has icon+label rows. */
.nav-dropdown{position:relative;display:inline-flex;align-items:center}
.nav-dropdown-trigger{
  display:inline-flex;align-items:center;gap:4px;
  color:#fff;background:none;border:none;
  font:600 14px 'Plus Jakarta Sans',sans-serif;
  padding:8px 14px;border-radius:8px;cursor:pointer;
  transition:background .15s, color .15s;
}
.nav-dropdown-trigger:hover{background:rgba(255,255,255,.1);color:#fff}
.nav-dropdown-trigger .nav-caret{
  font-size:10px;line-height:1;transition:transform .2s;
  display:inline-block;
}
.nav-dropdown-trigger.is-open .nav-caret,
.nav-dropdown-trigger[aria-expanded="true"] .nav-caret{transform:rotate(180deg)}
/* Menu sits flush against the trigger (no gap) and uses a ::before pseudo
   bridge to absorb the sliver between trigger and menu. Without this,
   the 10px gap makes the pointer "leave" the dropdown as you traverse
   from trigger to menu, snapping the menu closed before you reach it. */
.nav-dropdown-menu{
  position:absolute;top:100%;left:50%;
  transform:translateX(-50%) translateY(-6px) scale(.96);
  opacity:0;pointer-events:none;
  width:280px;padding:8px;
  background:rgba(6,31,24,.94);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border:1px solid rgba(94,213,211,.25);
  border-radius:14px;
  box-shadow:0 16px 48px -12px rgba(0,0,0,.6);
  transition:opacity .18s ease, transform .18s ease;
  z-index:100;
}
/* Invisible bridge: extends the menu's hover area 12px above the visible
   top edge so the mouse can travel from trigger bottom to menu top without
   ever leaving the .nav-dropdown subtree. pointer-events:none on the
   bridge itself means it doesn't block clicks on menu items. */
.nav-dropdown-menu::before{
  content:'';
  position:absolute;
  top:-12px;left:0;right:0;
  height:12px;
  pointer-events:auto;  /* must catch hover */
}
.nav-dropdown-menu.is-open{
  opacity:1;pointer-events:auto;
  transform:translateX(-50%) translateY(0) scale(1);
}
.nav-dropdown-menu a{
  display:grid;grid-template-columns:32px 1fr;gap:12px;
  align-items:center;
  padding:10px 12px;border-radius:9px;
  color:rgba(255,255,255,.85);text-decoration:none;
  transition:background .15s, color .15s;
}
.nav-dropdown-menu a:hover{
  background:rgba(94,213,211,.12);color:#fff;
}
.nav-dropdown-menu a .ndi{
  font-size:20px;line-height:1;text-align:center;
}
.nav-dropdown-menu a b{
  display:block;color:#fff;font-weight:700;font-size:14px;
  font-family:'Plus Jakarta Sans',sans-serif;line-height:1.2;
}
.nav-dropdown-menu a small{
  display:block;color:rgba(255,255,255,.5);
  font-size:11px;margin-top:3px;line-height:1.35;
  font-weight:500;
}
.nav-dropdown-menu a.is-active{
  background:rgba(252,76,2,.12);
}
.nav-dropdown-menu a.is-active b{color:var(--orange)}

/* Divider between main items and the (Strava-gated) Disconnect row.
   Only rendered when the user is connected — applyAktivitasGate()
   toggles the `hidden` attribute. */
.nav-dropdown-divider{
  height:1px;
  background:rgba(94,213,211,.15);
  margin:6px 4px;
}
/* Same shape as .nav-dropdown-menu a but rendered as a <button> so it
   can post /disconnect without navigation. Muted styling so it reads
   as an account action, not a primary nav item. */
.nav-dropdown-item{
  display:grid;grid-template-columns:32px 1fr;gap:12px;
  align-items:center;width:100%;
  padding:10px 12px;border-radius:9px;border:none;background:none;
  color:rgba(255,255,255,.7);font-family:'Plus Jakarta Sans',sans-serif;
  text-align:left;cursor:pointer;
  transition:background .15s, color .15s;
}
.nav-dropdown-item:hover{
  background:rgba(220,53,69,.12);color:#ff8a95;
}
.nav-dropdown-item .ndi{
  font-size:20px;line-height:1;text-align:center;
}
.nav-dropdown-item b{
  display:block;color:#fff;font-weight:700;font-size:14px;
  font-family:'Plus Jakarta Sans',sans-serif;line-height:1.2;
}
.nav-dropdown-item small{
  display:block;color:rgba(255,255,255,.5);
  font-size:11px;margin-top:3px;line-height:1.35;
  font-weight:500;
}
.nav-dropdown-item.is-muted b{color:rgba(255,255,255,.85)}
.nav-dropdown-item.is-muted:hover b{color:#ff8a95}
[hidden]{display:none !important}

/* FOOTER */
footer{
  position:fixed;bottom:0;left:0;right:0;z-index:50;
  display:flex;flex-direction:column;
  background:rgba(6,31,24,.68);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:rgba(255,255,255,.85);
  border-top:1px solid rgba(94,213,211,.18);
}
.footer-inner{
  max-width:1200px;margin:0 auto;padding:18px 28px 20px;
  display:flex;align-items:center;gap:32px;flex-wrap:wrap;width:100%;
}
.footer-brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.footer-brand .brand-text{color:#fff}
footer ul{display:flex;gap:18px;list-style:none;flex-wrap:wrap}
footer ul li{margin:0}
footer a{color:rgba(255,255,255,.78);text-decoration:none;font-size:13px;transition:.2s;white-space:nowrap}
footer a:hover{color:var(--orange)}
.socials{display:flex;gap:8px;margin-left:auto;flex-shrink:0}
.socials a{
  width:32px;height:32px;border-radius:8px;
  background:rgba(255,255,255,.08);display:grid;place-items:center;
  transition:.2s;color:#fff;
}
.socials a:hover{background:var(--orange);color:#fff;transform:translateY(-2px)}

/* FOOTER DRAWER
   bottom: var(--footer-h) so drawer sits exactly above the footer (no overlap).
   The drawer slides UP from the footer — footer stays anchored at bottom:0.
*/
.footer-drawer{
  position:fixed;left:0;right:0;z-index:51;
  bottom:var(--footer-h);
  max-height:min(60vh, 600px);
  background:rgba(6,31,24,.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(94,213,211,.18);
  border-bottom:1px solid rgba(94,213,211,.12);
  transform:translateY(100%);
  transition:transform 400ms cubic-bezier(.4,0,.2,1), opacity 300ms ease;
  opacity:0;
  overflow:hidden;
  /* When closed, drawer must NOT block clicks to the footer underneath.
     (translateY(100%) shifts it visually into the footer top region,
     so without this the drawer intercepts every footer link click.) */
  pointer-events:none;
}
.footer-drawer.is-open{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
  transition:transform 450ms cubic-bezier(.22,1,.36,1), opacity 250ms ease;
}
/* Crossfade when swapping content without closing first (smoother than close→open) */
.footer-drawer.is-swapping{opacity:.35;transition:opacity 180ms ease}
.footer-drawer.is-swapping .footer-drawer-inner{opacity:0;transition:opacity 180ms ease}
.footer-drawer-inner{
  max-height:min(60vh, 600px);overflow-y:auto;overflow-x:hidden;
  padding:22px 28px 24px;
  opacity:0;transform:translateY(12px);
  transition:transform 350ms 100ms ease, opacity 350ms 100ms ease;
  scrollbar-width:thin;scrollbar-color:rgba(94,213,211,.35) transparent;
}
.footer-drawer.is-open .footer-drawer-inner{transform:translateY(0);opacity:1}
.footer-drawer-inner::-webkit-scrollbar{width:6px}
.footer-drawer-inner::-webkit-scrollbar-thumb{background:rgba(94,213,211,.35);border-radius:3px}
.footer-drawer-inner::-webkit-scrollbar-track{background:transparent}

/* DRAWER CARD STYLES */
.drawer-card{color:#fff;max-width:1240px;margin:0 auto}
.drawer-card h2{
  font-family:'Bebas Neue',sans-serif;font-size:clamp(28px,3.6vw,40px);
  letter-spacing:1.5px;color:#fff;margin-bottom:4px;line-height:1;
}
.drawer-card h2 .accent{color:#5ed5d3}
.drawer-card .section-tag{
  display:inline-block;color:var(--orange);font-family:'Caveat',cursive;
  font-size:18px;font-weight:700;transform:rotate(-2deg);margin-bottom:10px;
}
.drawer-card p{color:rgba(255,255,255,.85);font-size:14px;line-height:1.6;margin-bottom:10px;max-width:760px}
.drawer-card .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.drawer-card .mini-card{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:12px;padding:14px;transition:.2s;
}
.drawer-card .mini-card:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25)}
.drawer-card .mini-card .day{font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:1.5px;color:var(--orange)}
.drawer-card .mini-card .when{color:#fff;font-weight:700;font-size:13px;margin:3px 0 4px}
.drawer-card .mini-card .where{color:rgba(255,255,255,.7);font-size:12px;line-height:1.45}
.drawer-card .gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.drawer-card .gallery .ph{
  aspect-ratio:1/1;border-radius:10px;
  background:linear-gradient(135deg,rgba(14,124,123,.45),rgba(255,106,61,.25));
  border:1px solid rgba(94,213,211,.18);display:grid;place-items:center;
  color:rgba(255,255,255,.55);font-family:'Bebas Neue',sans-serif;font-size:14px;
  letter-spacing:1.5px;transition:.2s;
}
.drawer-card .gallery .ph:hover{border-color:rgba(255,255,255,.3);color:#fff}
.drawer-card .faq-item{border-bottom:1px solid rgba(255,255,255,.12);padding:10px 0}
.drawer-card .faq-item:last-child{border-bottom:0}
.drawer-card .faq-item summary{
  cursor:pointer;font-weight:700;color:#fff;font-size:14px;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 0;
}
.drawer-card .faq-item summary::-webkit-details-marker{display:none}
.drawer-card .faq-item summary::after{content:"+";color:var(--orange);font-size:20px;font-weight:700;transition:transform .3s;flex-shrink:0}
.drawer-card .faq-item[open] summary::after{transform:rotate(45deg)}
.drawer-card .faq-item p{color:rgba(255,255,255,.78);font-size:13px;margin:8px 0 2px}
.drawer-card form{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.drawer-card form .full{grid-column:1/-1}
.drawer-card input,.drawer-card textarea{
  width:100%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  border-radius:8px;padding:10px 12px;color:#fff;font:500 13px/1.4 'Plus Jakarta Sans',sans-serif;transition:.2s;
}
.drawer-card input::placeholder,.drawer-card textarea::placeholder{color:rgba(255,255,255,.5)}
.drawer-card input:focus,.drawer-card textarea:focus{outline:none;border-color:var(--orange);background:rgba(255,255,255,.12)}
.drawer-card textarea{min-height:80px;resize:vertical}
.drawer-card .submit{
  justify-self:start;background:var(--orange);color:#fff;border:none;
  padding:10px 18px;border-radius:10px;font-weight:700;font-size:13px;cursor:pointer;
  box-shadow:0 10px 24px -8px rgba(255,106,61,.7);transition:transform .2s,background .2s;
}
.drawer-card .submit:hover{transform:translateY(-2px);background:var(--orange-light)}

/* BETA Badge — sits next to the logo in the header (top-left) */
.beta-badge{
  display:inline-block;
  background:var(--orange);color:#fff;
  font:800 10px/1 'Plus Jakarta Sans',sans-serif;
  letter-spacing:1.5px;
  padding:4px 8px;border-radius:5px;
  margin-left:8px;
  box-shadow:0 4px 12px -4px rgba(255,106,61,.6);
  vertical-align:middle;
  position:relative;top:-6px;
  pointer-events:none;
}
.nav-inner .beta-badge{position:static;top:auto;margin-left:10px}

a.is-active{color:var(--orange) !important}
.hidden{display:none !important}

/* Body push when drawer opens — disabled, drawer slides up as overlay */

@media(max-width:900px){
  .drawer-card .grid-3{grid-template-columns:1fr}
  .drawer-card .gallery{grid-template-columns:repeat(3,1fr)}
  .drawer-card form{grid-template-columns:1fr}
  .nav-links a:not(.nav-login):not(.nav-signup):not(.cta-btn):not(.nav-dropdown-trigger){display:none}
  /* On tablets the dropdown trigger stays; the menu anchors to viewport
     edges so it doesn't get clipped off-screen. */
  .nav-dropdown-menu{left:auto;right:0;transform:translateX(0) translateY(-6px) scale(.96)}
  .nav-dropdown-menu.is-open{transform:translateX(0) translateY(0) scale(1)}
}
@media(max-width:600px){
  .footer-drawer-inner{padding:20px 18px 22px}
  .drawer-card .gallery{grid-template-columns:repeat(2,1fr)}
  .nav-links a:not(.nav-login):not(.nav-signup):not(.nav-dropdown-trigger){display:none}
  /* Make the dropdown fill the available width on phones for easier tapping. */
  .nav-dropdown-menu{width:calc(100vw - 32px);max-width:320px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

/* The standalone Strava connect button used to live in the header next to
   the avatar, but it's been folded into the Aktivitas nav dropdown
   (see .nav-dropdown-* rules above) to keep the header compact. The
   `.strava-btn*` selectors are gone from here on purpose. */