/* ══════════════════════════════════════════════════════════
   PULSE — preview v6 design layer
   Built on top of app_v3.css (Nova) for structural/behavioral
   CSS (display toggles, breakpoints) — navigation is rebuilt
   into an icon rail (desktop) / FAB bottom-bar (mobile) via a
   CSS grid overlap trick (no markup change, so app.js keeps
   working untouched), the exercise picker gets real
   category-chip filtering, and rank progress becomes a glowing
   ring — all implemented in the forked js/app_v6.js.

   Rev.2 — mobile performance + weight pass. backdrop-filter
   (frosted glass) is a known GPU-heavy property, and v1 put it
   on ~20 repeating card/list surfaces plus 4 large blurred
   background blobs — expensive to rasterize and composite on
   mid-range phones. This revision keeps the same visual
   identity (violet→pink hero gradient, mint check-ins, ambient
   glow) but trades true frosted glass for cheap solid-tinted
   surfaces, halves the ambient blobs, and shrinks shadow/blur
   radii everywhere — a visually "lighter" and literally
   lighter-to-render dark UI.
   ══════════════════════════════════════════════════════════ */
@import url("app_v3.css?v=33");

:root{
  --bg:   #08080c;
  --bg2:  #131319;
  --bg3:  #191a21;
  --bg4:  #22232c;
  --border:  rgba(255,255,255,.08);
  --border2: rgba(255,255,255,.14);

  --ink:  #08080c;

  /* the hero duo */
  --accent:        #8b5cf6;
  --accent2:       #ec4899;
  --accent-dim:    rgba(139,92,246,.13);
  --accent-mid:    rgba(139,92,246,.30);
  --purple:        #8b5cf6;
  --purple-bright: #c4b5fd;
  --purple-dim:    rgba(139,92,246,.13);
  --purple2:       #ec4899;

  --green:     #22e6a8;
  --green-dim: rgba(34,230,168,.12);
  --red:       #fb7185;
  --red-dim:   rgba(251,113,133,.11);
  --amber:     #fbbf24;
  --amber-dim: rgba(251,191,36,.12);
  --cyan:      #38bdf8;
  --pink:      #ec4899;
  --blue:      #38bdf8;

  --grad:       linear-gradient(90deg,var(--accent),var(--accent2));
  --grad-warm:  linear-gradient(90deg,var(--accent2),var(--amber));
  --grad-cool:  linear-gradient(90deg,var(--blue),var(--accent));
  --grad-green: linear-gradient(90deg,var(--green),#5eead4);

  --text:       #f0f0f4;
  --text-muted: #9d9dae;
  --text-dim:   #5c5c6e;

  --radius:     18px;
  --radius-sm:  13px;
  --radius-lg:  24px;
  --radius-pill:999px;
  --font:'Manrope',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mono:'Space Mono',monospace;
}

/* ══ AMBIENT CANVAS — two soft blobs, not four; smaller + softer ══
   Fixed + low blur radius so it rasterizes once and never repaints
   on scroll — this is the cheap way to keep ambient color without
   paying for it on every frame. ══════════════════════════════════ */
body{ background:var(--bg); color:var(--text); overflow-x:hidden; }
body::before,body::after{
  content:'';position:fixed;z-index:-1;border-radius:50%;pointer-events:none;
  filter:blur(70px);will-change:auto;
}
body::before{width:360px;height:360px;top:-120px;left:-100px;background:var(--accent);opacity:.22}
body::after {width:340px;height:340px;bottom:-120px;right:-100px;background:var(--accent2);opacity:.16}

h1,h2,h3,.logo-name,.nav-brand{ letter-spacing:-.2px; }

/* ══ CARD SURFACES — solid tinted panels, no backdrop-filter ══════
   Looks like the same "glass" family (transparent-tinted, bordered,
   soft shadow) but costs nothing to composite: a flat color instead
   of a live blur of everything behind it. ══════════════════════════ */
.login-card,.member-list,.stats-row,.stats-grid,.event-card,.modal,
.admin-card,.color-picker-card,.volume-card,.workout-category,
.exercise-list,.stats-rank-card,.my-rank-card,.day-col,
.workout-date-bar,.gym-invite-card,.cheat-card,.set-input-row,
.selected-exercise,.num-stepper{
  background:var(--bg2);border:1px solid var(--border);
  box-shadow:0 4px 16px -6px rgba(0,0,0,.4);
}

/* ══ PREVIEW RIBBON ═══════════════════════════════════════ */
.v6-ribbon{
  position:sticky;top:0;z-index:500;display:flex;align-items:center;justify-content:center;
  gap:16px;flex-wrap:wrap;background:#0c0c11;border-bottom:1px solid var(--border2);
  padding:11px 44px 11px 14px;font-size:12.5px;color:var(--text-muted);
}
.v6-ribbon i{color:var(--accent2)}
.v6-ribbon a{
  color:var(--text);font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:6px;
  padding:5px 13px;background:var(--bg3);border-radius:var(--radius-pill);border:1px solid var(--border2);
}
.v6-ribbon a:hover{border-color:var(--accent-mid)}
.v6-ribbon-close{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  background:none;border:none;color:var(--text-dim);cursor:pointer;
  font-size:13px;padding:6px 8px;border-radius:var(--radius-sm);
}
.v6-ribbon-close:hover{color:var(--text);background:var(--bg3)}

/* ══ LOGIN ═════════════════════════════════════════════════ */
.login-content{max-width:380px}
.logo-mark,.logo-mark-sm{
  background:var(--grad);color:#fff;border-radius:var(--radius-sm);font-weight:800;box-shadow:0 4px 14px -4px var(--accent-mid);
}
.logo-name{font-weight:800}
.login-card{border-radius:var(--radius-lg);padding:30px 26px}
.login-card-header h1{font-weight:800;font-size:22px}
.login-card-header p{color:var(--text-dim)}

/* ══ FORM CONTROLS ═════════════════════════════════════════ */
.form-group label{color:var(--text-dim);font-weight:600;font-size:11px}
.form-group input,.form-group select{
  background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);
}
.form-group input:focus,.form-group select:focus{
  border-color:var(--accent-mid);box-shadow:0 0 0 3px var(--accent-dim);
}

/* ══ BUTTONS — the hero gradient lives here, and only here ══ */
.btn-primary{
  background:var(--grad);color:#fff;border-radius:var(--radius-pill);font-weight:700;
  box-shadow:0 3px 12px -4px var(--accent-mid);transition:transform .15s,box-shadow .2s;
}
.btn-primary:hover{box-shadow:0 5px 16px -3px var(--accent-mid);transform:translateY(-1px)}
.btn-primary:active{transform:scale(.98)}

.btn-secondary{background:var(--bg3);border:1px solid var(--border2);border-radius:var(--radius-pill);color:var(--text-muted)}
.btn-secondary:hover{color:var(--text);border-color:var(--accent-mid)}
.btn-ghost{background:transparent;border:1px solid var(--border);border-radius:var(--radius-pill);color:var(--text-dim)}
.btn-ghost:hover{color:var(--text-muted);border-color:var(--border2)}
.btn-add{background:var(--bg3);border:1px solid var(--border2);border-radius:var(--radius-pill);color:var(--text-muted)}
.btn-add:hover{color:var(--text);border-color:var(--accent-mid)}
.btn-logout{border-radius:var(--radius-pill);background:transparent;color:var(--red);border:1px solid var(--red-dim)}
.btn-logout:hover{background:var(--red-dim)}

.checkin-btn{
  background:linear-gradient(90deg,var(--green),#5eead4);color:#04231a;border-radius:var(--radius-pill);
  font-weight:800;box-shadow:0 4px 14px -4px rgba(34,230,168,.4);
}
.checkin-btn.checked-in{background:var(--bg3);color:var(--green);border:1px solid var(--green-dim);box-shadow:none}

/* ══ NAVIGATION — icon rail on desktop, FAB bar on mobile ══
   Pure CSS grid-overlap: every .tab-content sits in the same
   grid cell (only one is display:block at a time via v3's
   .tab-content.active rule), so no markup changes were needed
   for app.js to keep working untouched. ══════════════════════ */
.navbar{background:#0c0c11;border-bottom:1px solid var(--border)}
.nav-tab{border-radius:var(--radius-sm);color:var(--text-dim);font-weight:600}
.nav-tab:hover{background:var(--bg3);color:var(--text-muted)}
.nav-tab.active{background:var(--accent-dim);color:var(--text)}
.nav-tab.active i{color:var(--accent2)}
.nav-user{color:var(--text-muted)}

@media(min-width:641px){
  #mainScreen.active{display:grid;grid-template-columns:92px 1fr;height:100vh;overflow:hidden}
  .navbar{
    grid-column:1;grid-row:1;display:flex;flex-direction:column;align-items:center;
    height:100vh;padding:26px 10px;gap:10px;border-right:1px solid var(--border);border-bottom:none;
  }
  .nav-logo{flex-direction:column;gap:10px;min-width:0}
  .nav-brand{display:none}
  .nav-tabs{flex-direction:column;flex:1;justify-content:flex-start;gap:6px;width:100%}
  .nav-tab{flex-direction:column;gap:5px;padding:12px 4px;font-size:9.5px;width:100%}
  .nav-tab i{font-size:15px}
  .nav-user{flex-direction:column;gap:8px;min-width:0;margin-top:auto}
  #navUsername{display:none}
  .tab-content{grid-column:2;grid-row:1;height:100vh;overflow-y:auto}
}

.bottom-nav{background:#0c0c11;border-top:1px solid var(--border)}
.bn-tab{color:var(--text-dim)}
.bn-tab.active{color:var(--text)}
.bn-tab.active i{color:var(--accent2)}

.gym-sub-nav{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-pill);padding:4px}
.gym-sub-tab{border-radius:var(--radius-pill);color:var(--text-dim);font-weight:600}
.gym-sub-tab.active{background:var(--grad);color:#fff;box-shadow:0 2px 10px -3px var(--accent-mid)}
.gym-sub-tab.active i{color:#fff}

/* floating action button — mobile only, lives inside #mainScreen in
   the HTML now so it hides/shows with the screen like bottom-nav does
   (a v1 bug: it was a body-level sibling and floated over the login
   screen too). Opens a quick-action popup menu (toggleFabMenu() in
   the HTML) rather than guessing a single action. */
.fab-btn{display:none}
@media(max-width:640px){
  /* Cut a circular notch into the bar's top edge so the FAB looks
     docked into it (Android "notched bottom bar" pattern) instead of
     floating separately above with a visible gap. */
  .bottom-nav{
    -webkit-mask-image:radial-gradient(circle 32px at 50% 0,transparent 98%,#000 100%);
    mask-image:radial-gradient(circle 32px at 50% 0,transparent 98%,#000 100%);
  }
  .fab-btn{
    display:flex;align-items:center;justify-content:center;
    position:fixed;bottom:calc(41px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);
    width:54px;height:54px;border-radius:50%;border:3px solid var(--bg);
    background:var(--grad);color:#fff;font-size:19px;cursor:pointer;
    box-shadow:0 4px 12px -4px var(--accent-mid),0 2px 6px rgba(0,0,0,.35);
    z-index:110;transition:transform .15s;
  }
  .fab-btn:active{transform:translateX(-50%) scale(.92)}
  .fab-btn i{transition:transform .2s}
  .fab-btn.open i{transform:rotate(45deg)}

  .fab-menu-overlay{
    position:fixed;inset:0;z-index:109;background:rgba(6,6,10,.4);
    opacity:0;pointer-events:none;transition:opacity .18s;
  }
  .fab-menu-overlay.show{opacity:1;pointer-events:auto}
  .fab-menu{
    position:fixed;left:50%;bottom:calc(107px + env(safe-area-inset-bottom));
    transform:translate(-50%,8px);min-width:236px;padding:6px;
    background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius);
    box-shadow:0 16px 40px -12px rgba(0,0,0,.55);
    opacity:0;transition:opacity .18s,transform .18s;
  }
  .fab-menu-overlay.show .fab-menu{opacity:1;transform:translate(-50%,0)}
  .fab-menu-item{
    display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;
    background:none;border:none;border-radius:var(--radius-sm);color:var(--text);
    font-family:var(--font);font-size:14px;font-weight:600;cursor:pointer;text-align:left;
  }
  .fab-menu-item:active{background:var(--bg3)}
  .fab-menu-icon{
    width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-size:13px;color:#fff;flex-shrink:0;
  }
  .fmi-green{background:linear-gradient(135deg,var(--green),#5eead4)}
  .fmi-violet{background:var(--grad)}
  .fmi-pink{background:linear-gradient(135deg,var(--accent2),#f472b6)}
}

/* ══ SECTION HEADERS ═══════════════════════════════════════ */
.section-header h2{font-weight:700;color:var(--text);font-size:14.5px}
.section-header h2::before{background:var(--grad);box-shadow:none;width:4px;border-radius:2px}

/* ══ WEEK GRID ═════════════════════════════════════════════ */
.day-col{border-radius:var(--radius-sm)}
.day-col:hover{border-color:var(--border2)}
.day-col.is-today{border-color:var(--accent-mid);box-shadow:0 0 0 1px var(--accent-mid) inset}
.day-col.has-me{background:var(--accent-dim)}
.day-col.is-today .day-name,.day-col.is-today .day-date{color:var(--purple-bright)}
.week-nav span{color:var(--text-muted)}
.week-nav button{border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg3)}
.week-nav button:hover{color:var(--text);border-color:var(--border2)}

/* ══ LISTS ═════════════════════════════════════════════════ */
.member-list{gap:0;border-radius:var(--radius);overflow:hidden}
.member-row{border:none;border-bottom:1px solid var(--border);border-radius:0;background:transparent}
.member-row:last-child{border-bottom:none}
.member-row:hover{background:var(--bg3)}
.member-row.my-row{background:var(--accent-dim)}
.member-row.shamed{opacity:.4}
.member-row.mr-gold{box-shadow:none;border-left:2px solid #fbbf24;padding-left:12px}
.member-row.mr-silver{border-left:2px solid #cbd5e1;padding-left:12px}
.member-row.mr-bronze{border-left:2px solid #d08a52;padding-left:12px}
.mem-name{font-weight:700}
.you-tag{color:var(--purple-bright)}
.rank-badge{border-radius:var(--radius-pill)}
.badge{border-radius:var(--radius-pill)}

.pr-row{background:transparent;border:none;border-radius:0}
.pr-row-main:hover{background:var(--bg3)}
.pr-value{color:var(--purple-bright);font-family:var(--mono)}
.pr-reps{border-radius:var(--radius-pill);font-family:var(--mono)}
.exercise-graph-wrap{background:var(--bg3);border-top:1px solid var(--border)}

/* ══ STATS STRIP ═══════════════════════════════════════════ */
.stats-row{border-radius:var(--radius);overflow:hidden;gap:0}
.stat-card{background:transparent;border:none;border-radius:0;border-right:1px solid var(--border)}
.stat-card:last-child{border-right:none}
.stat-label{color:var(--text-dim);font-size:10.5px}
.stat-value{font-family:var(--mono);font-variant-numeric:tabular-nums}
.stat-value.purple{color:var(--purple-bright)}
.stat-value.green{color:var(--green)}
.stat-value.pink{color:var(--pink)}

.stats-grid{gap:0;border-radius:var(--radius);overflow:hidden}
.stat-big-card{background:transparent;border:none;border-radius:0;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.stat-big-card:nth-child(2n){border-right:none}
.stat-big-val{font-family:var(--mono);font-variant-numeric:tabular-nums}
.stat-big-label{color:var(--text-dim)}

/* ══ RANK RING — the signature element ════════════════════
   Replaces the linear XP bar with a glowing circular meter,
   the achievement-ring idiom this fitness/rank-gamified app
   has earned the right to use. ══════════════════════════════ */
.stats-rank-top{align-items:center}
.stats-rank-current{display:flex;align-items:center;gap:16px}
.rank-ring-wrap{position:relative;width:78px;height:78px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.rank-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.rank-ring-track{fill:none;stroke:var(--bg4);stroke-width:7}
.rank-ring-fill{
  fill:none;stroke:var(--accent);stroke-width:7;stroke-linecap:round;
  filter:drop-shadow(0 0 5px var(--accent-mid));
  transition:stroke-dashoffset .7s cubic-bezier(.4,0,.2,1);
}
.rank-ring-emoji{position:relative;font-size:32px}
.stats-rank-name{font-weight:800}
.stats-rank-xp{color:var(--purple-bright);font-family:var(--mono)}
.stats-rank-next{background:var(--bg3);border-radius:var(--radius-pill);color:var(--text-muted)}
.xp-left{color:var(--text-muted);font-family:var(--mono);font-size:11.5px}
.stats-rank-tiers{border-top:1px solid var(--border)}
.stats-rank-tier,.rank-tier{border-radius:var(--radius-sm)}
.stats-rank-tier.current,.rank-tier.current{background:var(--accent-dim);color:var(--purple-bright)}
.rank-tier-badge{border-radius:var(--radius-pill);background:var(--grad);color:#fff;font-weight:700}
.rank-tier-xp{font-family:var(--mono)}

/* ══ EVENTS ═══════════════════════════════════════════════ */
.event-card{border-radius:var(--radius)}
.event-card:hover{border-color:var(--border2)}
.event-card::before{width:4px;border-radius:2px 0 0 2px}
.event-name{font-weight:700}
.event-day{font-family:var(--mono)}
.event-type-tag{border-radius:var(--radius-pill)}
.event-countdown{border-radius:var(--radius-pill)}
.event-countdown.today{background:var(--accent-dim);color:var(--purple-bright)}
.rsvp-btn{border-radius:var(--radius-pill)}

/* ══ WORKOUT LOG + CATEGORY CHIPS ══════════════════════════
   The exercise picker used to be one long grouped list. Now a
   sticky chip bar lets you jump to a muscle group directly —
   real menu/category restructuring, implemented in
   filterExercises()/categoryChipsHtml() in app_v6.js. ═══════ */
.workout-date-bar{border-radius:var(--radius)}
.workout-date-bar span{font-weight:700}
.workout-date-bar button{border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg3)}
.workout-category{border-radius:var(--radius);overflow:hidden}
.workout-cat-label{color:var(--text-dim)}
.workout-entry-name{font-weight:700}
.workout-entry-detail{font-family:var(--mono)}
.workout-entry-cat{border-radius:var(--radius-pill)}
.log-sort-icon-btn{border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--bg3)}

.volume-card{border-radius:var(--radius)}
.volume-val{color:var(--purple-bright);font-family:var(--mono)}

.vol-row{border:none;border-bottom:1px solid var(--border);border-radius:0;background:transparent}
.vol-track{background:var(--bg4);border-radius:var(--radius-pill)}
.vol-fill{background:var(--grad);border-radius:var(--radius-pill)}
.vol-val{color:var(--purple-bright);font-family:var(--mono)}

.cat-chip-bar{
  display:flex;gap:8px;flex-wrap:wrap;position:sticky;top:0;z-index:2;
  background:var(--bg4);padding:10px 10px 9px;margin:-1px -1px 0;
  border-bottom:1px solid var(--border);
}
.cat-chip{
  background:var(--bg3);border:1px solid var(--border);color:var(--text-muted);
  border-radius:var(--radius-pill);padding:6px 13px;font-size:12px;font-weight:700;
  cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,border-color .15s;font-family:var(--font);
}
.cat-chip:hover{color:var(--text);border-color:var(--border2)}
.cat-chip.active{background:var(--grad);color:#fff;border-color:transparent}

/* ══ HEATMAP ═══════════════════════════════════════════════ */
.hm-cell{border-radius:3px;background:var(--bg4)}
.hm-cell.active{background:var(--accent);box-shadow:none}

/* ══ CREW / ADMIN / MODALS ═════════════════════════════════ */
.color-picker-card,.admin-card{border-radius:var(--radius)}
.color-swatch.active{border-color:#fff}
.invite-url{color:var(--purple-bright)}
.copy-btn,.del-btn,.del-btn-red,.edit-btn{border-radius:var(--radius-pill)}

.modal{border-radius:var(--radius-lg);box-shadow:0 20px 50px -16px rgba(0,0,0,.55)}
.modal-overlay{background:rgba(6,6,10,.72)}
.modal-header{border-bottom:1px solid var(--border);padding-bottom:12px;margin-bottom:14px}
.modal-header h3{font-weight:700}
.modal-header h3 i{color:var(--accent2)}

.quick-times button{border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--bg3)}
.quick-times button:hover{border-color:var(--accent-mid);color:var(--purple-bright)}
.type-opt{border-radius:var(--radius-sm);border:1px solid var(--border)}
.type-opt.selected{border-color:transparent;background:var(--grad);color:#fff}

.exercise-list{border-radius:var(--radius);overflow:hidden;padding-bottom:2px}
.ex-category-label{background:var(--bg4);color:var(--text-dim)}
.ex-item{border-bottom:1px solid var(--border)}
.ex-item:hover,.ex-item.selected{background:var(--accent-dim);color:var(--text)}
.ex-item-cat{border-radius:4px;color:var(--purple-bright)}
.ex-add-custom{color:var(--purple-bright);border-top:1px solid var(--border)}
.selected-exercise{border-radius:var(--radius-sm)}

.num-stepper{border-radius:var(--radius-sm)}
.num-stepper button{color:var(--purple-bright)}
.num-stepper button:active{background:var(--accent-dim)}
.num-stepper input{font-family:var(--mono);color:var(--text)}
.set-input-row{border-radius:var(--radius-sm)}
.set-label{font-family:var(--mono)}

.toast{background:var(--bg2);border:1px solid var(--border2);color:var(--text);border-radius:var(--radius-pill)}
.xp-info-note{background:var(--bg3);border-radius:var(--radius-sm)}

/* ══ PR CELEBRATION ═════════════════════════════════════════ */
.pr-celebrate{
  background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius-lg);
  box-shadow:0 16px 40px -14px rgba(0,0,0,.55),0 0 34px -14px var(--accent-mid);
}
.pr-celebrate-icon{filter:none}
.pr-celebrate-title{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800;
}
.pr-celebrate-weight{color:var(--text-muted);font-family:var(--mono)}
.pr-celebrate-xp{
  color:#fff;background:var(--grad);border:none;border-radius:var(--radius-pill);font-family:var(--mono);font-weight:700;
}

.ptr-indicator{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius-pill);color:var(--text-muted)}

@media (prefers-reduced-motion:reduce){
  .btn-primary,.checkin-btn,.nav-tab,.v6-ribbon a,.rank-ring-fill{transition:none}
}