<!--
==========================================================
SUPABASE SQL — run once in the Supabase SQL editor
==========================================================

CREATE TABLE IF NOT EXISTS public.belt_history (
  id          uuid PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id     uuid REFERENCES auth.users(id) ON DELETE CASCADE NOT NULL,
  belt        text NOT NULL,
  stripes     int  NOT NULL DEFAULT 0,
  date_awarded date,
  notes       text,
  created_at  timestamptz DEFAULT now()
);

ALTER TABLE public.belt_history ENABLE ROW LEVEL SECURITY;

CREATE POLICY "Users manage own belt history"
  ON public.belt_history
  USING (auth.uid() = user_id)
  WITH CHECK (auth.uid() = user_id);

-- Also add new columns to sessions if they don't exist:
ALTER TABLE public.sessions
  ADD COLUMN IF NOT EXISTS class_type        text,
  ADD COLUMN IF NOT EXISTS sweeps            int  DEFAULT 0,
  ADD COLUMN IF NOT EXISTS escapes           int  DEFAULT 0,
  ADD COLUMN IF NOT EXISTS submissions_used  text[] DEFAULT '{}',
  ADD COLUMN IF NOT EXISTS submissions_against text[] DEFAULT '{}';

-- Add strength_flag to sessions:
ALTER TABLE public.sessions
  ADD COLUMN IF NOT EXISTS strength_flag text;

-- Admin stats RPC (run once):
CREATE OR REPLACE FUNCTION get_admin_stats()
RETURNS json
LANGUAGE plpgsql
SECURITY DEFINER
SET search_path = public
AS $$
DECLARE result json;
BEGIN
  SELECT json_build_object(
    'total_sessions',  (SELECT COUNT(*)::int FROM sessions),
    'total_users',     (SELECT COUNT(DISTINCT user_id)::int FROM sessions),
    'sessions_7d',     (SELECT COUNT(*)::int FROM sessions WHERE created_at > NOW() - INTERVAL '7 days'),
    'sessions_30d',    (SELECT COUNT(*)::int FROM sessions WHERE created_at > NOW() - INTERVAL '30 days'),
    'ai_sessions',     (SELECT COUNT(*)::int FROM sessions WHERE source = 'ai'),
    'manual_sessions', (SELECT COUNT(*)::int FROM sessions WHERE source = 'manual'),
    'weakness_flags', (
      SELECT COALESCE(json_agg(json_build_object('flag', weakness_flag, 'count', cnt) ORDER BY cnt DESC), '[]'::json)
      FROM (SELECT weakness_flag, COUNT(*)::int as cnt FROM sessions WHERE weakness_flag IS NOT NULL AND weakness_flag <> '' GROUP BY weakness_flag ORDER BY cnt DESC LIMIT 60) t
    ),
    'strength_flags', (
      SELECT COALESCE(json_agg(json_build_object('flag', strength_flag, 'count', cnt) ORDER BY cnt DESC), '[]'::json)
      FROM (SELECT strength_flag, COUNT(*)::int as cnt FROM sessions WHERE strength_flag IS NOT NULL AND strength_flag <> '' GROUP BY strength_flag ORDER BY cnt DESC LIMIT 60) t
    ),
    'positions', (
      SELECT COALESCE(json_agg(json_build_object('position', position, 'count', cnt) ORDER BY cnt DESC), '[]'::json)
      FROM (SELECT position, COUNT(*)::int as cnt FROM sessions WHERE position IS NOT NULL AND position <> '' GROUP BY position ORDER BY cnt DESC LIMIT 20) t
    ),
    'class_types', (
      SELECT COALESCE(json_agg(json_build_object('type', COALESCE(class_type,'unspecified'), 'count', cnt) ORDER BY cnt DESC), '[]'::json)
      FROM (SELECT class_type, COUNT(*)::int as cnt FROM sessions GROUP BY class_type) t
    ),
    'submissions_used', (
      SELECT COALESCE(json_agg(json_build_object('sub', sub, 'count', cnt) ORDER BY cnt DESC), '[]'::json)
      FROM (SELECT sub, COUNT(*)::int as cnt FROM sessions, unnest(submissions_used) sub GROUP BY sub ORDER BY cnt DESC LIMIT 15) t
    ),
    'submissions_against', (
      SELECT COALESCE(json_agg(json_build_object('sub', sub, 'count', cnt) ORDER BY cnt DESC), '[]'::json)
      FROM (SELECT sub, COUNT(*)::int as cnt FROM sessions, unnest(submissions_against) sub GROUP BY sub ORDER BY cnt DESC LIMIT 15) t
    ),
    'sessions_by_week', (
      SELECT COALESCE(json_agg(json_build_object('week', week, 'count', cnt) ORDER BY week), '[]'::json)
      FROM (SELECT DATE_TRUNC('week', created_at)::date as week, COUNT(*)::int as cnt FROM sessions GROUP BY week ORDER BY week DESC LIMIT 16) t
    )
  ) INTO result;
  RETURN result;
END;
$$;

GRANT EXECUTE ON FUNCTION get_admin_stats() TO authenticated;

-- Nemesis feature (run once):
CREATE TABLE IF NOT EXISTS public.nemesis (
  id          uuid PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id     uuid REFERENCES auth.users(id) ON DELETE CASCADE NOT NULL,
  name        text NOT NULL,
  belt        text DEFAULT 'unknown',
  type        text NOT NULL DEFAULT 'training_partner',
  gym         text,
  notes       text,
  created_at  timestamptz DEFAULT now()
);
ALTER TABLE public.nemesis ENABLE ROW LEVEL SECURITY;
CREATE POLICY "Users manage own nemesis" ON public.nemesis USING (auth.uid() = user_id) WITH CHECK (auth.uid() = user_id);

CREATE TABLE IF NOT EXISTS public.nemesis_rolls (
  id          uuid PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id     uuid REFERENCES auth.users(id) ON DELETE CASCADE NOT NULL,
  nemesis_id  uuid REFERENCES public.nemesis(id) ON DELETE CASCADE NOT NULL,
  date        date DEFAULT CURRENT_DATE,
  result      text NOT NULL,
  notes       text,
  created_at  timestamptz DEFAULT now()
);
ALTER TABLE public.nemesis_rolls ENABLE ROW LEVEL SECURITY;
CREATE POLICY "Users manage own nemesis rolls" ON public.nemesis_rolls USING (auth.uid() = user_id) WITH CHECK (auth.uid() = user_id);

==========================================================
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
  <title>Flowmora</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="preload" as="image" href="/hero.jpg" fetchpriority="high">
  <link href="https://fonts.googleapis.com/css2?family=Shojumaru&display=swap" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2.105.4"></script>
  <script src="https://d3js.org/d3.v7.min.js"></script>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }

    /* ── Global 3D / Holographic system ───────────────────── */
    @keyframes holoFloat {
      0%, 100% { transform: translateY(0px); filter: drop-shadow(0 0 8px rgba(230,59,48,0.15)); }
      50% { transform: translateY(-4px); filter: drop-shadow(0 0 14px rgba(230,59,48,0.28)); }
    }
    @keyframes holoGlow {
      0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 4px 24px rgba(0,0,0,0.55), 0 0 20px rgba(230,59,48,0.08); }
      50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 8px 32px rgba(0,0,0,0.5), 0 0 36px rgba(230,59,48,0.18); }
    }
    @keyframes scanLine {
      0% { transform: translateY(-100%); opacity: 0; }
      10% { opacity: 0.6; }
      90% { opacity: 0.6; }
      100% { transform: translateY(400%); opacity: 0; }
    }
    @keyframes borderGlow {
      0%, 100% { opacity: 0.5; }
      50% { opacity: 1; }
    }
    @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

    html { overflow-x: hidden; width: 100%; }
    body {
      background: #05040c;
      color: #f0f0f0;
      font-family: system-ui, sans-serif;
      min-height: 100vh;
      overflow-x: hidden;
      width: 100%;
      max-width: 100%;
      position: relative;
    }
    /* Atmospheric grid mesh — visible perspective grid */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      z-index: -2;
      background-image:
        linear-gradient(rgba(230,59,48,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(230,59,48,0.07) 1px, transparent 1px);
      background-size: 48px 48px;
    }
    /* Ambient red glow blobs */
    body::after {
      content: '';
      position: fixed;
      inset: 0;
      z-index: -1;
      background:
        radial-gradient(ellipse 60% 45% at 5% 0%, rgba(200,30,10,0.28) 0%, transparent 50%),
        radial-gradient(ellipse 45% 30% at 95% 100%, rgba(140,15,5,0.18) 0%, transparent 50%),
        radial-gradient(ellipse 80% 60% at 50% 50%, rgba(10,6,20,0.6) 0%, transparent 100%);
      pointer-events: none;
    }
    #bgImage { display: none; }
    .app { width: 100%; max-width: 720px; margin: 0 auto; padding: 0 1.5rem calc(80px + env(safe-area-inset-bottom, 0px)); }

    /* ── Header ─────────────────────────────────────────── */
    .header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: linear-gradient(180deg, rgba(8,4,4,0.97) 0%, rgba(5,3,3,0.92) 100%);
      backdrop-filter: blur(32px);
      -webkit-backdrop-filter: blur(32px);
      border-bottom: 0.5px solid rgba(255,255,255,0.06);
      box-shadow: 0 1px 0 rgba(230,59,48,0.08), 0 4px 40px rgba(0,0,0,0.7), 0 0 60px rgba(100,0,0,0.15);
      margin: 0 -1.5rem 2.5rem;
      padding: 1.25rem 1.5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .logo-block { display: flex; align-items: center; gap: 12px; }
    .logo-img { height: 132px; object-fit: contain; }
    .brand-block { display: flex; flex-direction: column; justify-content: center; line-height: 1; }
    .brand-name { font-family: 'Shojumaru', cursive; font-size: 26px; color: #f0f0f0; letter-spacing: 1px; text-transform: uppercase; line-height: 1; margin-bottom: 6px; }
    .brand-tagline { font-family: system-ui, sans-serif; font-size: 8px; color: #e63b30; letter-spacing: 3px; text-transform: uppercase; font-weight: 700; }
    .tagline { font-size: 12px; color: #666; margin-top: 0.2rem; }
    .header-controls { display: flex; align-items: center; gap: 12px; }
    .voice-toggle { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #555; cursor: pointer; }
    .toggle-track { width: 32px; height: 18px; background: #2a2a2a; border-radius: 9px; position: relative; transition: background 0.2s; }
    .toggle-track.on { background: #e63b30; }
    .toggle-thumb { width: 14px; height: 14px; background: white; border-radius: 50%; position: absolute; top: 2px; left: 2px; transition: left 0.2s; }
    .toggle-track.on .toggle-thumb { left: 16px; }
    .user-display { display: flex; align-items: center; gap: 8px; }

    /* ── Bottom nav ──────────────────────────────────────── */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 100;
      background: linear-gradient(180deg, rgba(6,4,4,0.9) 0%, rgba(4,3,3,0.97) 100%);
      backdrop-filter: blur(32px);
      -webkit-backdrop-filter: blur(32px);
      border-top: 0.5px solid rgba(255,255,255,0.06);
      box-shadow: 0 -1px 0 rgba(230,59,48,0.07), 0 -8px 40px rgba(0,0,0,0.6);
      display: flex;
      justify-content: space-around;
      align-items: stretch;
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .nav-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      padding: 10px 0 12px;
      cursor: pointer;
      border: none;
      background: none;
      color: #444;
      font-family: inherit;
      font-size: 11px;
      letter-spacing: 0.3px;
      transition: color 0.2s;
      -webkit-tap-highlight-color: transparent;
      position: relative;
    }
    .nav-item svg { width: 22px; height: 22px; fill: currentColor; transition: filter 0.2s; }
    .nav-item.active { color: #e63b30; }
    .nav-item.active svg { filter: drop-shadow(0 0 6px rgba(230,59,48,0.7)); }
    .nav-item.active::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 24px; height: 2px; background: #e63b30; border-radius: 0 0 2px 2px; box-shadow: 0 0 8px rgba(230,59,48,0.8); }
    .nav-item:not(.active):hover { color: #777; }
    .user-email { font-size: 12px; color: #555; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .signout-btn { background: none; border: 0.5px solid rgba(255,255,255,0.1); border-radius: 6px; padding: 0.3rem 0.75rem; font-size: 12px; color: #555; cursor: pointer; }
    .signout-btn:hover { border-color: #e63b30; color: #e63b30; }

    /* ── Cards (3D glassmorphism) ───────────────────────── */
    .card {
      background: linear-gradient(160deg, rgba(24,15,18,0.92) 0%, rgba(12,8,16,0.97) 100%);
      backdrop-filter: blur(28px);
      -webkit-backdrop-filter: blur(28px);
      border: 1px solid rgba(230,59,48,0.22);
      border-top-color: rgba(230,80,68,0.35);
      border-radius: 18px;
      padding: 1.5rem;
      margin-bottom: 1rem;
      box-shadow:
        inset 0 1px 0 rgba(255,120,100,0.12),
        0 4px 8px rgba(0,0,0,0.6),
        0 20px 60px rgba(0,0,0,0.75),
        0 0 30px rgba(230,59,48,0.08);
      position: relative;
      overflow: hidden;
      transition: box-shadow 0.25s, border-color 0.25s;
      animation: holoFloat 5s ease-in-out infinite; animation-delay: 0.6s;
    }
    .card:nth-child(2) { animation-delay: 2.1s; }
    .card:nth-child(3) { animation-delay: 3.6s; }
    .card:nth-child(4) { animation-delay: 1.3s; }
    .card:nth-child(5) { animation-delay: 4.2s; }
    .card::after {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent 5%, rgba(255,120,100,0.3) 40%, rgba(255,80,60,0.2) 60%, transparent 95%);
      border-radius: 18px 18px 0 0;
      pointer-events: none;
    }
    .card-label { font-size: 11px; color: #555; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1rem; }
    textarea {
      width: 100%;
      background: rgba(255,255,255,0.04);
      border: 0.5px solid rgba(255,255,255,0.08);
      border-radius: 8px;
      padding: 0.875rem 1rem;
      font-size: 14px;
      color: #e0e0e0;
      resize: none;
      font-family: inherit;
      line-height: 1.6;
    }
    textarea:focus { outline: none; border-color: #e63b30; }
    textarea::placeholder { color: #444; }
    .input-row { position: relative; }
    .mic-btn { position: absolute; right: 10px; bottom: 10px; width: 32px; height: 32px; background: rgba(230,59,48,0.12); border: 0.5px solid #e63b30; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.15s; }
    .mic-btn:hover { background: rgba(230,59,48,0.22); }
    .mic-btn.listening { background: #e63b30; animation: micPulse 1s infinite; }
    .mic-btn svg { width: 14px; height: 14px; fill: #e63b30; }
    .mic-btn.listening svg { fill: white; }
    @keyframes micPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(230,59,48,0.4); } 50% { box-shadow: 0 0 0 6px rgba(230,59,48,0); } }
    .listening-indicator { font-size: 12px; color: #e63b30; margin-top: 0.5rem; display: none; }
    .listening-indicator.active { display: block; }
    .submit-btn { width: 100%; background: linear-gradient(135deg, #e63b30 0%, #c92b22 100%); border: none; border-radius: 10px; padding: 0.875rem; font-size: 15px; font-weight: 600; color: white; cursor: pointer; margin-top: 0.75rem; transition: all 0.2s; box-shadow: 0 4px 20px rgba(230,59,48,0.4), inset 0 1px 0 rgba(255,150,140,0.3), 0 1px 0 rgba(0,0,0,0.5); letter-spacing: 0.3px; }
    .submit-btn:hover { background: linear-gradient(135deg, #f04540 0%, #d93028 100%); box-shadow: 0 6px 28px rgba(230,59,48,0.55), inset 0 1px 0 rgba(255,150,140,0.4); transform: translateY(-1px); }
    .submit-btn:active { transform: translateY(0); }
    .submit-btn:disabled { background: rgba(255,255,255,0.06); color: #444; cursor: not-allowed; box-shadow: none; }
    .section-title { font-size: 10px; color: #666; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 0.75rem; margin-top: 1.5rem; font-weight: 700; }

    /* ── Flow cards ─────────────────────────────────────── */
    .flow-card {
      background: linear-gradient(160deg, rgba(22,12,16,0.92) 0%, rgba(10,7,14,0.97) 100%);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border: 1px solid rgba(230,59,48,0.2);
      border-radius: 16px;
      padding: 1.25rem;
      margin-bottom: 0.75rem;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 20px rgba(0,0,0,0.55), 0 12px 40px rgba(0,0,0,0.3);
      position: relative;
      overflow: hidden;
      transition: box-shadow 0.2s, transform 0.2s;
    }
    .flow-card:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 4px 20px rgba(0,0,0,0.55), 0 0 30px rgba(230,59,48,0.1); }
    .flow-chain { border-left: 2px solid #e63b30; padding-left: 1rem; margin-bottom: 0.75rem; }
    .flow-title { font-size: 13px; font-weight: 500; color: #ffa5a0; margin-bottom: 0.4rem; }
    .flow-body { font-size: 14px; color: #aaa; line-height: 1.6; }
    .deeper-btn { background: rgba(230,59,48,0.1); border: 0.5px solid #e63b30; border-radius: 6px; padding: 0.4rem 0.875rem; font-size: 12px; color: #e63b30; cursor: pointer; transition: all 0.15s; }
    .deeper-btn:hover { background: rgba(230,59,48,0.2); }
    .deeper-response { background: rgba(255,255,255,0.03); border: 0.5px solid rgba(255,255,255,0.07); border-radius: 8px; padding: 1rem; margin-top: 0.75rem; font-size: 14px; color: #ccc; line-height: 1.7; display: none; }

    /* ── Drills ─────────────────────────────────────────── */
    .drill-item { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 0.5px solid rgba(255,255,255,0.05); }
    .drill-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
    .drill-num { background: rgba(230,59,48,0.12); color: #e63b30; border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 500; flex-shrink: 0; margin-top: 2px; }
    .drill-content { flex: 1; }
    .drill-text { font-size: 14px; color: #aaa; line-height: 1.6; margin-bottom: 0.5rem; }
    .drill-rating { display: flex; gap: 4px; margin-bottom: 0.5rem; }
    .star { font-size: 18px; cursor: pointer; color: #333; transition: color 0.1s; }
    .star.active { color: #e63b30; }
    .drill-notes { width: 100%; background: rgba(255,255,255,0.04); border: 0.5px solid rgba(255,255,255,0.07); border-radius: 6px; padding: 0.5rem 0.75rem; font-size: 13px; color: #aaa; font-family: inherit; resize: none; }
    .drill-notes:focus { outline: none; border-color: #e63b30; }
    .drill-notes::placeholder { color: #333; }
    .save-drill-btn { background: none; border: 0.5px solid rgba(255,255,255,0.1); border-radius: 6px; padding: 0.3rem 0.75rem; font-size: 12px; color: #555; cursor: pointer; margin-top: 0.4rem; transition: all 0.15s; }
    .save-drill-btn:hover { border-color: #e63b30; color: #e63b30; }
    .saved-badge { font-size: 11px; color: #4ade80; margin-left: 8px; display: none; }

    /* ── Video cards ─────────────────────────────────────── */
    .video-card { background: rgba(10,10,10,0.7); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 0.5px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 0.875rem 1rem; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 12px; cursor: pointer; }
    .video-card:hover { border-color: #e63b30; }
    .video-thumb { width: 40px; height: 40px; background: #e63b30; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .video-info { flex: 1; min-width: 0; }
    .video-title { font-size: 13px; color: #e0e0e0; margin-bottom: 2px; }
    .video-sub { font-size: 11px; color: #555; }
    .verified-badge { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: #e63b30; background: rgba(230,59,48,0.12); border: 0.5px solid rgba(230,59,48,0.35); border-radius: 20px; padding: 1.5px 7px; vertical-align: middle; white-space: nowrap; }
    .video-thumb-img { width: 100px; height: 56px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
    .video-thumb-shimmer { width: 100px; height: 56px; background: rgba(255,255,255,0.07); border-radius: 6px; flex-shrink: 0; animation: shimmer 1.5s ease-in-out infinite; }
    @keyframes shimmer { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.9; } }

    /* ── Chat ────────────────────────────────────────────── */
    .chat-section { margin-top: 1.5rem; }
    .chat-messages { background: rgba(6,6,6,0.75); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 0.5px solid rgba(255,255,255,0.07); border-radius: 14px; padding: 1rem; margin-bottom: 0.75rem; max-height: 300px; overflow-y: auto; }
    .chat-msg { margin-bottom: 1rem; }
    .chat-msg:last-child { margin-bottom: 0; }
    .chat-msg.user .bubble { background: rgba(230,59,48,0.15); border: 0.5px solid rgba(230,59,48,0.3); border-radius: 8px 8px 2px 8px; padding: 0.75rem 1rem; font-size: 14px; color: #ffa5a0; display: inline-block; max-width: 85%; }
    .chat-msg.assistant .bubble { background: rgba(255,255,255,0.04); border: 0.5px solid rgba(255,255,255,0.08); border-radius: 8px 8px 8px 2px; padding: 0.75rem 1rem; font-size: 14px; color: #ccc; line-height: 1.7; display: inline-block; max-width: 95%; }
    .chat-msg.user { text-align: right; }
    .chat-input-row { display: flex; gap: 8px; align-items: center; }
    .chat-input-wrap { flex: 1; position: relative; }
    .chat-input { width: 100%; background: rgba(8,8,8,0.75); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 0.5px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 0.75rem 2.5rem 0.75rem 1rem; font-size: 14px; color: #e0e0e0; font-family: inherit; }
    .chat-input:focus { outline: none; border-color: #e63b30; }
    .chat-input::placeholder { color: #444; }
    .chat-mic { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; background: rgba(230,59,48,0.1); border: 0.5px solid #e63b30; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; }
    .chat-mic.listening { background: #e63b30; animation: micPulse 1s infinite; }
    .chat-mic svg { width: 12px; height: 12px; fill: #e63b30; }
    .chat-mic.listening svg { fill: white; }
    .chat-send { background: #e63b30; border: none; border-radius: 8px; padding: 0.75rem 1.25rem; color: white; font-size: 14px; cursor: pointer; flex-shrink: 0; }
    .chat-send:hover { background: #cc2f25; }
    .chat-send:disabled { background: rgba(255,255,255,0.06); color: #444; cursor: not-allowed; }
    .speaking-indicator { font-size: 12px; color: #e63b30; margin-top: 0.4rem; display: none; }

    /* ── Weakness flag ───────────────────────────────────── */
    .weakness-flag { background: rgba(26,18,8,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 0.5px solid #854f0b; border-radius: 10px; padding: 0.75rem 1rem; margin-bottom: 1rem; font-size: 13px; color: #ef9f27; }
    .weakness-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: #854f0b; margin-bottom: 0.25rem; }
    .strength-flag { background: rgba(74,222,128,0.08); border-left: 2px solid #4ade80; border-radius: 0 8px 8px 0; padding: 0.75rem 1rem; font-size: 13px; color: #d0ffd0; margin-top: 0.5rem; margin-bottom: 1rem; }
    .strength-label { font-size: 10px; color: #4ade80; text-transform: uppercase; letter-spacing: 0.8px; font-weight: 600; margin-bottom: 0.25rem; }

    /* ── Loading ─────────────────────────────────────────── */
    .loading { display: flex; align-items: center; gap: 8px; color: #555; font-size: 14px; padding: 1rem 0; }
    .dot { width: 6px; height: 6px; background: #e63b30; border-radius: 50%; animation: pulse 1.2s infinite; }
    .dot:nth-child(2) { animation-delay: 0.2s; }
    .dot:nth-child(3) { animation-delay: 0.4s; }
    @keyframes pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

    /* ── Progress view ───────────────────────────────────── */
    .progress-view { display: none; }
    .stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 1rem; }
    .stat-card {
      background: linear-gradient(160deg, rgba(24,14,18,0.92) 0%, rgba(12,8,16,0.97) 100%);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border: 1px solid rgba(230,59,48,0.2);
      border-top-color: rgba(230,80,60,0.35);
      border-radius: 14px;
      padding: 1rem;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 8px 32px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,0,0,0.3);
      position: relative; overflow: hidden;
      animation: holoFloat 5s ease-in-out infinite; animation-delay: 0.3s;
    }
    .stat-card:nth-child(2) { animation-delay: 1.8s; }
    .stat-card:nth-child(3) { animation-delay: 3.3s; }
    .stat-card:nth-child(4) { animation-delay: 4.8s; }
    .stat-card::after { content:''; position:absolute; top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent); pointer-events:none; }
    .stat-label { font-size: 11px; color: #555; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.25rem; }
    .stat-value { font-size: 24px; font-weight: 600; color: #f0f0f0; text-shadow: 0 0 20px rgba(230,59,48,0.2); }
    .stat-sub { font-size: 12px; color: #555; margin-top: 0.25rem; }
    .session-item {
      background: linear-gradient(160deg, rgba(22,12,16,0.92) 0%, rgba(10,7,14,0.97) 100%);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(230,59,48,0.18);
      border-top-color: rgba(230,80,60,0.3);
      border-radius: 14px;
      padding: 1rem 1.25rem;
      margin-bottom: 0.5rem;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 6px 24px rgba(0,0,0,0.65);
      animation: holoFloat 5s ease-in-out infinite; animation-delay: 0.5s;
    }
    .session-item:nth-child(2) { animation-delay: 2.0s; }
    .session-item:nth-child(3) { animation-delay: 3.5s; }
    .session-item:nth-child(4) { animation-delay: 1.1s; }
    .session-item:nth-child(5) { animation-delay: 4.4s; }
    .session-item:nth-child(6) { animation-delay: 2.7s; }
    .session-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
    .session-pos { font-size: 13px; font-weight: 500; color: #ffa5a0; }
    .session-date { font-size: 11px; color: #555; }
    .session-problem { font-size: 13px; color: #888; line-height: 1.5; margin-bottom: 0.25rem; }
    .session-meta { display: flex; gap: 12px; font-size: 12px; color: #555; }
    .pos-bar-item { display: flex; align-items: center; gap: 10px; margin-bottom: 0.75rem; }
    .pos-bar-item:last-child { margin-bottom: 0; }
    .pos-bar-label { font-size: 13px; color: #aaa; width: 110px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pos-bar-track { flex: 1; background: rgba(255,255,255,0.05); border-radius: 4px; height: 6px; }
    .pos-bar-fill { background: linear-gradient(90deg, #c92b22, #e63b30); border-radius: 4px; height: 6px; transition: width 0.3s; box-shadow: 0 0 8px rgba(230,59,48,0.4); }
    .pos-bar-count { font-size: 12px; color: #555; width: 24px; text-align: right; flex-shrink: 0; }
    .weak-item { background: rgba(26,18,8,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 0.5px solid #854f0b; border-radius: 10px; padding: 0.75rem 1rem; margin-bottom: 0.5rem; font-size: 13px; color: #ef9f27; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; animation: holoFloat 5s ease-in-out infinite; animation-delay: 1.4s; }
    .weak-item:nth-child(2) { animation-delay: 2.9s; }
    .weak-item:nth-child(3) { animation-delay: 4.3s; }
    .weak-text { flex: 1; line-height: 1.5; }
    .weak-count { font-size: 11px; color: #854f0b; background: rgba(133,79,11,0.2); border-radius: 10px; padding: 1px 7px; flex-shrink: 0; margin-top: 1px; }
    .empty-state { text-align: center; padding: 3rem 1rem; color: #444; font-size: 14px; }
    .progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
    .log-btn { background: linear-gradient(135deg, #e63b30 0%, #c92b22 100%); border: none; border-radius: 8px; padding: 0.5rem 1rem; font-size: 13px; font-weight: 600; color: white; cursor: pointer; box-shadow: 0 3px 12px rgba(230,59,48,0.4), inset 0 1px 0 rgba(255,150,140,0.25); transition: all 0.2s; }
    .log-btn:hover { box-shadow: 0 5px 20px rgba(230,59,48,0.55); transform: translateY(-1px); }
    .session-item.clickable { cursor: pointer; }
    .session-item.clickable:hover { border-color: #e63b30; }
    .session-chevron { color: #555; font-size: 18px; line-height: 1; }
    .source-tag { font-size: 10px; background: rgba(230,59,48,0.12); color: #e63b30; border-radius: 4px; padding: 2px 6px; }
    .ai-tag { background: rgba(74,222,128,0.1); color: #4ade80; }

    /* ── Collapsible sections ────────────────────────────── */
    .collapsible-section { margin-bottom: 1rem; }
    .collapsible-header { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 0.35rem 0; user-select: none; }
    .collapsible-header .section-title { margin: 0; }
    .collapsible-pill { font-size: 11px; background: rgba(255,255,255,0.07); color: #555; border-radius: 10px; padding: 1px 7px; }
    .collapsible-chev { color: #555; font-size: 16px; margin-left: auto; transition: transform 0.2s; display: inline-block; }
    .collapsible-chev.open { transform: rotate(90deg); }
    .collapsible-body { display: none; padding-top: 0.5rem; }
    .collapsible-body.open { display: block; }

    /* ── Session filter row ──────────────────────────────── */
    .session-filter-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; gap: 8px; }
    .session-filter-select { background: rgba(255,255,255,0.04); border: 0.5px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 0.35rem 0.75rem; font-size: 13px; color: #aaa; font-family: inherit; cursor: pointer; appearance: none; -webkit-appearance: none; }
    .session-filter-select:focus { outline: none; border-color: #e63b30; }
    .session-count-label { font-size: 12px; color: #555; white-space: nowrap; }

    /* ── Session detail ──────────────────────────────────── */
    .detail-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
    .back-btn { background: none; border: 0.5px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 0.4rem 0.875rem; font-size: 13px; color: #888; cursor: pointer; }
    .back-btn:hover { border-color: #e63b30; color: #e63b30; }
    .delete-btn { background: none; border: 0.5px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 0.4rem 0.875rem; font-size: 13px; color: #555; cursor: pointer; }
    .delete-btn:hover { border-color: #e24b4a; color: #e24b4a; }
    .detail-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
    .detail-pos { font-size: 18px; font-weight: 500; color: #ffa5a0; }
    .detail-date { font-size: 13px; color: #555; }
    .round-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 1.25rem; text-align: center; }
    .round-num { font-size: 28px; font-weight: 500; color: #f0f0f0; }
    .round-label { font-size: 11px; color: #555; text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; }
    .round-inputs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 0.75rem; }
    .round-input-group label { font-size: 11px; color: #555; text-transform: uppercase; letter-spacing: 1px; display: block; margin-bottom: 4px; }
    .round-input { width: 100%; background: rgba(255,255,255,0.04); border: 0.5px solid rgba(255,255,255,0.08); border-radius: 6px; padding: 0.5rem; font-size: 16px; color: #e0e0e0; text-align: center; font-family: inherit; }
    .round-input:focus { outline: none; border-color: #e63b30; }

    /* ── Log modal form ──────────────────────────────────── */
    .log-form-wrap { position: relative; z-index: 1; width: 100%; max-width: 480px; background: rgba(8,8,8,0.92); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); border: 0.5px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 1.5rem; }
    .log-form-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
    .form-group { margin-bottom: 1rem; }
    .form-label { font-size: 11px; color: #555; text-transform: uppercase; letter-spacing: 1px; display: block; margin-bottom: 0.4rem; }
    .log-input { width: 100%; background: rgba(255,255,255,0.04); border: 0.5px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 0.75rem 1rem; font-size: 14px; color: #e0e0e0; font-family: inherit; resize: none; }
    .log-input:focus { outline: none; border-color: #e63b30; }
    .form-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

    /* ── Video modal ─────────────────────────────────────── */
    .video-modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 1rem 1rem calc(68px + env(safe-area-inset-bottom, 0px) + 1rem); }
    .video-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.92); cursor: pointer; }
    .video-player-wrap { position: relative; z-index: 1; width: 100%; max-width: 640px; }
    .video-close { position: absolute; top: -38px; right: 0; background: none; border: none; color: #aaa; font-size: 20px; cursor: pointer; padding: 4px 10px; }
    .video-close:hover { color: #fff; }
    .video-ratio { position: relative; padding-bottom: 56.25%; border-radius: 10px; overflow: hidden; background: #000; }
    .video-ratio iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }

    /* ── Auth modal ──────────────────────────────────────── */
    .auth-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(0,0,0,0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
    .auth-card { width: 100%; max-width: 400px; background: linear-gradient(145deg, rgba(20,12,12,0.96) 0%, rgba(10,8,12,0.99) 100%); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 0.5px solid rgba(255,255,255,0.1); border-radius: 24px; padding: 2.25rem; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 24px 80px rgba(0,0,0,0.8), 0 0 60px rgba(100,0,0,0.15); }
    .auth-logo-img { height: 84px; object-fit: contain; display: block; margin: 0 auto 0.35rem; }
    .auth-tagline { font-size: 13px; color: #555; text-align: center; margin-bottom: 2rem; }
    .auth-tabs { display: flex; gap: 4px; background: rgba(255,255,255,0.05); border-radius: 8px; padding: 3px; margin-bottom: 1.5rem; }
    .auth-tab { flex: 1; padding: 0.5rem; border-radius: 6px; font-size: 13px; color: #666; cursor: pointer; border: none; background: none; transition: all 0.15s; }
    .auth-tab.active { background: #e63b30; color: white; }
    .auth-error { color: #e24b4a; font-size: 13px; margin-bottom: 1rem; display: none; }
    .auth-success { color: #4ade80; font-size: 13px; margin-top: 1rem; text-align: center; display: none; }

    /* ── Belt badge ─────────────────────────────────────── */
    .belt-badge { font-size: 11px; border-radius: 6px; padding: 3px 8px; cursor: pointer; border: none; font-family: inherit; font-weight: 500; letter-spacing: 0.3px; transition: opacity 0.15s; }
    .belt-badge:hover { opacity: 0.8; }
    .belt-white  { background: rgba(255,255,255,0.12); color: #ccc; border: 0.5px solid rgba(255,255,255,0.2); }
    .belt-blue   { background: rgba(59,100,230,0.18); color: #7ba4ff; border: 0.5px solid rgba(59,100,230,0.35); }
    .belt-purple { background: rgba(139,76,230,0.18); color: #c4a0ff; border: 0.5px solid rgba(139,76,230,0.35); }
    .belt-brown  { background: rgba(140,80,30,0.25); color: #d4974a; border: 0.5px solid rgba(140,80,30,0.45); }
    .belt-black  { background: rgba(255,255,255,0.06); color: #888; border: 0.5px solid rgba(255,255,255,0.12); }

    /* ── Profile modal ───────────────────────────────────── */
    .profile-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(0,0,0,0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
    .profile-card { width: 100%; max-width: 400px; background: rgba(10,10,10,0.92); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); border: 0.5px solid rgba(255,255,255,0.1); border-radius: 20px; padding: 1.75rem; }
    .profile-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
    .profile-title { font-size: 15px; font-weight: 500; color: #f0f0f0; }
    .belt-selector { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 0.4rem; }
    .belt-option { padding: 0.5rem 0; border-radius: 8px; font-size: 12px; font-weight: 500; text-align: center; cursor: pointer; border: 1.5px solid transparent; transition: all 0.15s; }
    .belt-option.selected { border-color: white; }
    .belt-option.white  { background: rgba(255,255,255,0.08); color: #ccc; }
    .belt-option.blue   { background: rgba(59,100,230,0.18); color: #7ba4ff; }
    .belt-option.purple { background: rgba(139,76,230,0.18); color: #c4a0ff; }
    .belt-option.brown  { background: rgba(140,80,30,0.25); color: #d4974a; }
    .belt-option.black  { background: rgba(255,255,255,0.06); color: #888; }
    .belt-option.selected.white  { border-color: #ccc; }
    .belt-option.selected.blue   { border-color: #7ba4ff; }
    .belt-option.selected.purple { border-color: #c4a0ff; }
    .belt-option.selected.brown  { border-color: #d4974a; }
    .belt-option.selected.black  { border-color: #888; }
    .profile-save-btn { width: 100%; background: #e63b30; border: none; border-radius: 8px; padding: 0.8rem; font-size: 14px; font-weight: 500; color: white; cursor: pointer; margin-top: 1.25rem; transition: background 0.15s; }
    .profile-save-btn:hover { background: #cc2f25; }
    .profile-save-btn:disabled { background: rgba(255,255,255,0.06); color: #444; cursor: not-allowed; }
    .profile-saved { font-size: 12px; color: #4ade80; text-align: center; margin-top: 0.75rem; display: none; }

    /* ── Calendar view ──────────────────────────────────── */
    .calendar-view { display: none; }

    /* Location setup */
    .cal-setup { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 55vh; text-align: center; padding: 1rem; }
    .cal-setup-icon { font-size: 52px; margin-bottom: 1rem; }
    .cal-setup-title { font-size: 20px; font-weight: 500; color: #f0f0f0; margin-bottom: 0.5rem; }
    .cal-setup-sub { font-size: 14px; color: #555; margin-bottom: 2rem; max-width: 280px; line-height: 1.6; }
    .cal-setup-btn { width: 100%; max-width: 300px; padding: 0.875rem 1.25rem; border-radius: 10px; font-size: 14px; font-weight: 500; cursor: pointer; margin-bottom: 0.75rem; border: none; font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 8px; }
    .cal-setup-btn.primary { background: #e63b30; color: white; }
    .cal-setup-btn.primary:hover { background: #cc2f25; }
    .cal-setup-btn.secondary { background: rgba(255,255,255,0.05); color: #aaa; border: 0.5px solid rgba(255,255,255,0.1) !important; }
    .cal-setup-btn.secondary:hover { border-color: rgba(230,59,48,0.5) !important; color: #e63b30; }
    .cal-divider { font-size: 12px; color: #333; margin: 0.25rem 0 1rem; }
    .cal-manual-row { display: flex; gap: 8px; width: 100%; max-width: 300px; }
    .cal-loc-input { flex: 1; background: rgba(255,255,255,0.04); border: 0.5px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 0.75rem 1rem; font-size: 14px; color: #e0e0e0; font-family: inherit; }
    .cal-loc-input:focus { outline: none; border-color: #e63b30; }
    .cal-go-btn { background: #e63b30; border: none; border-radius: 8px; padding: 0.75rem 1rem; color: white; font-size: 14px; cursor: pointer; flex-shrink: 0; }
    .cal-go-btn:hover { background: #cc2f25; }

    /* Calendar header */
    .cal-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
    .cal-loc-chip { display: flex; align-items: center; gap: 5px; background: rgba(255,255,255,0.05); border: 0.5px solid rgba(255,255,255,0.08); border-radius: 20px; padding: 0.3rem 0.875rem 0.3rem 0.6rem; font-size: 13px; color: #aaa; cursor: pointer; transition: all 0.15s; }
    .cal-loc-chip:hover { border-color: #e63b30; color: #e63b30; }
    .cal-loc-chip svg { width: 13px; height: 13px; fill: currentColor; }
    .cal-refresh-btn { background: none; border: 0.5px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 0.3rem 0.75rem; font-size: 12px; color: #555; cursor: pointer; }
    .cal-refresh-btn:hover { border-color: #e63b30; color: #e63b30; }

    /* Filters */
    .cal-filters { display: flex; gap: 6px; margin-bottom: 1.25rem; flex-wrap: wrap; align-items: center; }
    .cal-radius { background: rgba(255,255,255,0.04); border: 0.5px solid rgba(255,255,255,0.08); border-radius: 20px; padding: 0.3rem 0.75rem; font-size: 12px; color: #aaa; font-family: inherit; cursor: pointer; appearance: none; -webkit-appearance: none; }
    .cal-radius:focus { outline: none; border-color: #e63b30; }
    .type-pill { padding: 0.3rem 0.875rem; border-radius: 20px; font-size: 12px; cursor: pointer; border: 0.5px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); color: #555; transition: all 0.15s; font-family: inherit; }
    .type-pill.on-seminar     { background: rgba(139,76,230,0.15);  border-color: rgba(139,76,230,0.4);  color: #c4a0ff; }
    .type-pill.on-competition { background: rgba(230,180,48,0.14);  border-color: rgba(230,180,48,0.4);  color: #f0c040; }
    .type-pill.on-local       { background: rgba(59,150,230,0.14);  border-color: rgba(59,150,230,0.4);  color: #7ab8ff; }
    .type-pill.on-televised   { background: rgba(230,59,48,0.14);   border-color: rgba(230,59,48,0.4);   color: #ff8a83; }

    /* Event cards */
    .event-card {
      background: linear-gradient(145deg, rgba(18,12,12,0.9) 0%, rgba(10,8,10,0.97) 100%);
      backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
      border: 0.5px solid rgba(230,59,48,0.2);
      border-top-color: rgba(230,80,60,0.32);
      border-radius: 16px; padding: 1rem 1.25rem; margin-bottom: 0.75rem; cursor: pointer;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 4px 20px rgba(0,0,0,0.5), 0 0 20px rgba(230,59,48,0.06);
      transition: all 0.2s;
      animation: holoFloat 5s ease-in-out infinite; animation-delay: 0.9s;
    }
    .event-card:nth-child(2) { animation-delay: 2.4s; }
    .event-card:nth-child(3) { animation-delay: 3.9s; }
    .event-card:nth-child(4) { animation-delay: 1.5s; }
    .event-card:nth-child(5) { animation-delay: 4.6s; }
    .event-card:hover { border-color: rgba(230,59,48,0.4); box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), 0 4px 20px rgba(0,0,0,0.5), 0 0 24px rgba(230,59,48,0.12); }
    .event-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 0.5rem; }
    .event-title { font-size: 14px; font-weight: 500; color: #f0f0f0; line-height: 1.4; flex: 1; }
    .event-badge { font-size: 10px; font-weight: 600; letter-spacing: 0.7px; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; flex-shrink: 0; margin-top: 2px; }
    .badge-seminar     { background: rgba(139,76,230,0.2);  color: #c4a0ff; }
    .badge-competition { background: rgba(230,180,48,0.18); color: #f0c040; }
    .badge-local       { background: rgba(59,150,230,0.18); color: #7ab8ff; }
    .badge-televised   { background: rgba(230,59,48,0.18);  color: #ff8a83; }
    .event-date { font-size: 13px; color: #e63b30; font-weight: 500; margin-bottom: 0.3rem; }
    .event-location-line { font-size: 12px; color: #555; margin-bottom: 0.4rem; display: flex; align-items: center; gap: 4px; }
    .event-snippet { font-size: 13px; color: #666; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .event-thumb { width: 70px; height: 50px; object-fit: cover; border-radius: 7px; flex-shrink: 0; }

    /* Event detail */
    .event-detail-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
    .event-detail-badge { font-size: 11px; font-weight: 600; letter-spacing: 0.7px; text-transform: uppercase; padding: 3px 9px; border-radius: 5px; }
    .event-detail-date { font-size: 15px; color: #e63b30; font-weight: 500; margin-bottom: 0.5rem; }
    .event-detail-title { font-size: 21px; font-weight: 600; color: #f0f0f0; line-height: 1.3; margin-bottom: 0.75rem; }
    .event-detail-venue { font-size: 14px; color: #777; margin-bottom: 0.25rem; }
    .event-detail-loc { font-size: 13px; color: #555; margin-bottom: 1rem; }
    .event-detail-desc { font-size: 14px; color: #aaa; line-height: 1.75; margin-top: 1rem; }
    .event-reg-btn { width: 100%; background: #e63b30; border: none; border-radius: 10px; padding: 1rem; font-size: 15px; font-weight: 500; color: white; cursor: pointer; margin-top: 1.75rem; transition: background 0.15s; }
    .event-reg-btn:hover { background: #cc2f25; }
    .event-no-link { font-size: 13px; color: #444; text-align: center; margin-top: 1rem; }

    /* ── Tool activity chips ─────────────────────────────── */
    .tool-activity { display: none; flex-wrap: wrap; gap: 6px; margin-bottom: 0.75rem; align-items: center; }
    .tool-chip { font-size: 10px; background: rgba(230,59,48,0.12); color: #e63b30; border: 0.5px solid rgba(230,59,48,0.25); border-radius: 4px; padding: 2px 8px; letter-spacing: 0.3px; }
    .tool-activity-label { font-size: 10px; color: #444; text-transform: uppercase; letter-spacing: 1px; margin-right: 2px; }

    /* ── Dashboard view ─────────────────────────────────── */
    .dashboard-view { display: none; }
    .greeting-text { font-size: 22px; font-weight: 700; color: #f0f0f0; line-height: 1.3; letter-spacing: -0.3px; }
    .greeting-text span { color: #e63b30; text-shadow: 0 0 20px rgba(230,59,48,0.5); }

    /* ── Holographic centerpiece hero ── */
    .dash-hero-wrap {
      position: relative;
      width: calc(100% + 3rem);
      margin: -2.5rem -1.5rem 0;
      height: 88vw;
      max-height: 560px;
      min-height: 320px;
      overflow: hidden;
    }
    .dash-hero-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 8%;
      display: block;
      filter: brightness(1.3) contrast(1.05) saturate(1.1);
    }
    /* Fade edges so it bleeds into the background */
    .dash-hero-wrap::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background:
        linear-gradient(to bottom, rgba(5,4,12,0.35) 0%, rgba(5,4,12,0) 15%, rgba(5,4,12,0) 55%, rgba(5,4,12,0.7) 82%, rgba(5,4,12,1) 100%),
        linear-gradient(to right, rgba(5,4,12,0.3) 0%, transparent 15%, transparent 85%, rgba(5,4,12,0.3) 100%);
    }
    /* Holographic scan ring at bottom */
    .dash-hero-wrap::after {
      content: '';
      position: absolute;
      bottom: 60px;
      left: 50%;
      transform: translateX(-50%);
      width: 85%;
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(230,59,48,0.6), rgba(255,120,100,0.9), rgba(230,59,48,0.6), transparent);
      box-shadow: 0 0 20px rgba(230,59,48,0.6), 0 0 40px rgba(230,59,48,0.3);
      z-index: 2;
      border-radius: 50%;
      animation: borderGlow 2.5s ease-in-out infinite;
    }
    /* Greeting text over the hero */
    .dash-hero-top {
      position: absolute;
      top: 0; left: 0; right: 0;
      padding: 1.25rem 1.5rem;
      z-index: 3;
    }
    /* 3 floating stat cards hovering over the platform */
    .dash-hero-stats {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      padding: 0 1.25rem 1rem;
      z-index: 3;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      align-items: end;
    }
    .hero-stat {
      background: rgba(8,5,14,0.72);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(230,59,48,0.35);
      border-top-color: rgba(230,80,60,0.6);
      border-radius: 14px;
      padding: 0.75rem 0.5rem;
      text-align: center;
      box-shadow:
        inset 0 1px 0 rgba(255,100,80,0.2),
        0 8px 32px rgba(0,0,0,0.85),
        0 0 24px rgba(230,59,48,0.18);
      animation: holoFloat 5s ease-in-out infinite;
    }
    .hero-stat:nth-child(2) {
      margin-bottom: 10px; /* middle card floats higher */
      animation-delay: 1.7s;
      border-color: rgba(230,59,48,0.45);
      border-top-color: rgba(255,80,60,0.7);
      box-shadow: inset 0 1px 0 rgba(255,100,80,0.25), 0 8px 32px rgba(0,0,0,0.85), 0 0 32px rgba(230,59,48,0.25);
    }
    .hero-stat:nth-child(3) { animation-delay: 3.4s; }

    /* ── Holographic streak badge ── */
    .streak-banner {
      display: inline-flex; align-items: center; gap: 8px;
      background: linear-gradient(135deg, rgba(230,59,48,0.22) 0%, rgba(80,15,15,0.18) 100%);
      border: 1px solid rgba(230,59,48,0.5);
      border-radius: 22px;
      padding: 0.5rem 1.1rem;
      font-size: 14px; color: #ffb0a8; margin-top: 0.6rem; font-weight: 700;
      box-shadow: 0 0 24px rgba(230,59,48,0.25), 0 4px 16px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,150,140,0.2);
      animation: holoGlow 3.5s ease-in-out infinite;
    }

    /* ── Belt card ── */
    .belt-card {
      background: linear-gradient(145deg, rgba(24,14,18,0.92) 0%, rgba(12,8,16,0.97) 100%);
      backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
      border: 1px solid rgba(230,59,48,0.22);
      border-top-color: rgba(230,80,60,0.38);
      border-radius: 18px; padding: 1.25rem 1.5rem; margin-bottom: 1rem;
      display: flex; align-items: center; justify-content: space-between; gap: 1rem;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 8px 40px rgba(0,0,0,0.75), 0 0 0 1px rgba(0,0,0,0.4);
      position: relative; overflow: hidden;
      animation: holoFloat 5s ease-in-out infinite; animation-delay: 0.4s;
    }
    .belt-card::after { content:''; position:absolute; top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent); pointer-events:none; }
    .belt-card-left { flex: 1; }
    .belt-card-name { font-size: 18px; font-weight: 700; margin-bottom: 0.4rem; }
    .stripe-dots { display: flex; gap: 6px; margin-bottom: 0.4rem; }
    .stripe-dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,0.08); border: 1.5px solid rgba(255,255,255,0.15); }
    .stripe-dot.filled { background: #f0f0f0; border-color: #f0f0f0; box-shadow: 0 0 6px rgba(255,255,255,0.5); }
    .belt-target-date { font-size: 12px; color: #555; }
    .belt-bar { width: 10px; border-radius: 5px; min-height: 60px; flex-shrink: 0; box-shadow: 0 0 12px currentColor; }

    /* ── Quick stats — holographic floating widgets ── */
    .quick-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 1rem; }
    .qs-card {
      background: linear-gradient(160deg, rgba(30,14,16,0.93) 0%, rgba(10,7,14,0.98) 100%);
      backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
      border: 1px solid rgba(230,59,48,0.28);
      border-top-color: rgba(230,80,60,0.45);
      border-radius: 16px; padding: 1rem 0.75rem; text-align: center;
      box-shadow:
        inset 0 1px 0 rgba(255,100,80,0.15),
        0 8px 32px rgba(0,0,0,0.8),
        0 0 24px rgba(230,59,48,0.12),
        0 0 0 1px rgba(0,0,0,0.5);
      animation: holoFloat 5s ease-in-out infinite;
      position: relative; overflow: hidden; transition: box-shadow 0.25s, border-color 0.25s;
    }
    .qs-card:nth-child(2) { animation-delay: 1.7s; }
    .qs-card:nth-child(3) { animation-delay: 3.4s; }
    .qs-card::before { content:''; position:absolute; top:0;left:0;right:0; height:50%; background:linear-gradient(180deg,rgba(230,59,48,0.06) 0%,transparent 100%); pointer-events:none; }
    .qs-card::after { content:''; position:absolute; top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent 10%,rgba(255,100,80,0.5) 50%,transparent 90%); pointer-events:none; }
    .qs-card:hover { border-color: rgba(230,59,48,0.5); border-top-color: rgba(255,80,60,0.7); box-shadow: inset 0 1px 0 rgba(255,100,80,0.2), 0 8px 32px rgba(0,0,0,0.8), 0 0 40px rgba(230,59,48,0.25); }
    .qs-value { font-size: 28px; font-weight: 700; color: #ffffff; text-shadow: 0 0 24px rgba(230,59,48,0.4), 0 2px 4px rgba(0,0,0,0.9); letter-spacing: -0.5px; }
    .qs-label { font-size: 9px; color: #777; text-transform: uppercase; letter-spacing: 1.2px; margin-top: 4px; font-weight: 600; }

    /* ── Heatmap ── */
    .radar-wrap { display: flex; justify-content: center; margin-bottom: 1rem; }

    /* ── Focus / accountability cards ── */
    .focus-card {
      background: linear-gradient(135deg, rgba(30,18,5,0.9) 0%, rgba(16,10,4,0.95) 100%);
      backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
      border: 0.5px solid rgba(133,79,11,0.5);
      border-radius: 14px; padding: 0.875rem 1rem; margin-bottom: 1rem;
      box-shadow: inset 0 1px 0 rgba(240,180,60,0.08), 0 4px 20px rgba(0,0,0,0.5), 0 0 20px rgba(133,79,11,0.1);
      animation: holoFloat 5s ease-in-out infinite; animation-delay: 1.2s;
    }
    .focus-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: #854f0b; margin-bottom: 0.25rem; }
    .focus-text { font-size: 14px; color: #ef9f27; line-height: 1.5; }

    /* ── Daily Drill Recommendation ── */
    .drill-rec-card {
      background: linear-gradient(135deg, rgba(20,8,8,0.95) 0%, rgba(12,4,4,0.98) 100%);
      backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(230,59,48,0.35);
      border-top-color: rgba(255,80,60,0.55);
      border-radius: 16px; padding: 1rem 1.1rem; margin-bottom: 1rem;
      box-shadow: inset 0 1px 0 rgba(255,120,100,0.12), 0 8px 32px rgba(0,0,0,0.7), 0 0 28px rgba(230,59,48,0.12);
      animation: holoFloat 5s ease-in-out infinite; animation-delay: 0.4s;
      position: relative; overflow: hidden;
    }
    .drill-rec-card::after { content:''; position:absolute; top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,rgba(255,100,80,0.35),transparent); pointer-events:none; }
    .drill-rec-eyebrow { font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; color: #e63b30; margin-bottom: 0.4rem; font-weight: 600; }
    .drill-rec-title { font-size: 17px; font-weight: 700; color: #f5f5f5; margin-bottom: 0.3rem; line-height: 1.3; }
    .drill-rec-why { font-size: 12px; color: #777; line-height: 1.45; margin-bottom: 0.85rem; }
    .drill-rec-btn { display: inline-flex; align-items: center; gap: 6px; background: #e63b30; border: none; border-radius: 10px; color: #fff; font-size: 13px; font-weight: 700; padding: 0.55rem 1.1rem; cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent; transition: opacity 0.15s; }
    .drill-rec-btn:active { opacity: 0.8; }

    /* ── Voice session logging ── */
    .voice-log-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: rgba(230,59,48,0.1); border: 1px dashed rgba(230,59,48,0.45); border-radius: 12px; color: #e87d75; font-size: 13px; font-weight: 600; padding: 0.7rem; cursor: pointer; font-family: inherit; margin-bottom: 1.1rem; transition: all 0.15s; -webkit-tap-highlight-color: transparent; }
    .voice-log-btn svg { flex-shrink: 0; }
    .voice-log-btn.listening { background: rgba(230,59,48,0.22); border-style: solid; border-color: #e63b30; color: #fff; animation: voicePulse 1.4s ease-in-out infinite; }
    .voice-log-btn.parsing { background: rgba(255,255,255,0.05); border-style: solid; border-color: rgba(255,255,255,0.15); color: #999; }
    @keyframes voicePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(230,59,48,0.4); } 50% { box-shadow: 0 0 0 7px rgba(230,59,48,0); } }

    /* ── First-run onboarding ── */
    .onboard-modal { position: fixed; inset: 0; z-index: 300; display: none; align-items: center; justify-content: center; padding: 1.25rem; background: rgba(3,2,8,0.97); }
    .onboard-modal.open { display: flex; }
    .onboard-card { width: 100%; max-width: 420px; background: linear-gradient(160deg, rgba(24,14,18,0.95) 0%, rgba(10,6,12,0.99) 100%); border: 1px solid rgba(230,59,48,0.3); border-top-color: rgba(255,90,70,0.5); border-radius: 20px; padding: 1.75rem 1.5rem; box-shadow: 0 24px 80px rgba(0,0,0,0.8), 0 0 40px rgba(230,59,48,0.12); max-height: 90vh; overflow-y: auto; }
    .onboard-progress { display: flex; gap: 6px; margin-bottom: 1.5rem; }
    .onboard-dot { height: 3px; flex: 1; border-radius: 3px; background: rgba(255,255,255,0.1); transition: background 0.3s; }
    .onboard-dot.done { background: #e63b30; }
    .onboard-title { font-size: 20px; font-weight: 700; color: #f5f5f5; margin-bottom: 0.4rem; line-height: 1.3; }
    .onboard-sub { font-size: 13px; color: #777; line-height: 1.5; margin-bottom: 1.5rem; }
    .onboard-belt-row { display: flex; gap: 8px; margin-bottom: 1rem; }
    .onboard-belt { flex: 1; padding: 0.8rem 0.25rem; border-radius: 12px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); color: #999; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; text-align: center; transition: all 0.15s; -webkit-tap-highlight-color: transparent; }
    .onboard-belt .belt-swatch { display: block; width: 100%; height: 5px; border-radius: 3px; margin-bottom: 6px; }
    .onboard-belt.active { border-color: #e63b30; background: rgba(230,59,48,0.12); color: #f0f0f0; }
    .onboard-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 1rem; }
    .onboard-pill { padding: 0.6rem 1rem; border-radius: 20px; border: 0.5px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.04); color: #999; font-size: 13px; cursor: pointer; font-family: inherit; transition: all 0.15s; -webkit-tap-highlight-color: transparent; }
    .onboard-pill.active { background: #e63b30; border-color: #e63b30; color: #fff; }
    .onboard-next-btn { width: 100%; background: #e63b30; border: none; border-radius: 12px; color: #fff; font-size: 15px; font-weight: 700; padding: 0.9rem; cursor: pointer; font-family: inherit; margin-top: 0.5rem; -webkit-tap-highlight-color: transparent; }
    .onboard-next-btn:disabled { opacity: 0.4; cursor: default; }
    .onboard-skip { display: block; margin: 0.9rem auto 0; background: none; border: none; color: #555; font-size: 12px; cursor: pointer; font-family: inherit; }

    /* ── Post-session Coach Debrief ── */
    .debrief-sheet {
      position: fixed;
      left: 0.75rem; right: 0.75rem;
      bottom: calc(68px + env(safe-area-inset-bottom, 0px) + 0.75rem);
      z-index: 95;
      background: linear-gradient(150deg, rgba(26,12,12,0.97) 0%, rgba(10,5,8,0.99) 100%);
      backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
      border: 1px solid rgba(230,59,48,0.4);
      border-top-color: rgba(255,90,70,0.6);
      border-radius: 16px;
      padding: 1rem 1.1rem;
      box-shadow: inset 0 1px 0 rgba(255,120,100,0.12), 0 12px 40px rgba(0,0,0,0.8), 0 0 32px rgba(230,59,48,0.18);
      transform: translateY(calc(100% + 90px));
      opacity: 0;
      transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s;
      max-width: 560px;
      margin: 0 auto;
    }
    .debrief-sheet.open { transform: translateY(0); opacity: 1; }
    .debrief-eyebrow { font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; color: #e63b30; font-weight: 600; margin-bottom: 0.4rem; }
    .debrief-text { font-size: 14px; color: #e8e8e8; line-height: 1.55; margin-bottom: 0.85rem; }
    .debrief-actions { display: flex; gap: 8px; align-items: center; }
    .debrief-go-btn { background: #e63b30; border: none; border-radius: 10px; color: #fff; font-size: 13px; font-weight: 700; padding: 0.55rem 1rem; cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent; }
    .debrief-go-btn:active { opacity: 0.8; }
    .debrief-dismiss-btn { background: rgba(255,255,255,0.06); border: 0.5px solid rgba(255,255,255,0.12); border-radius: 10px; color: #888; font-size: 13px; padding: 0.55rem 1rem; cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent; }

    /* ── Vulnerability Map ── */
    .vuln-card {
      background: linear-gradient(160deg, rgba(24,14,18,0.92) 0%, rgba(12,8,16,0.97) 100%);
      backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
      border: 1px solid rgba(230,59,48,0.2);
      border-top-color: rgba(230,80,60,0.35);
      border-radius: 16px; padding: 1rem 1.1rem; margin-bottom: 1rem;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 8px 32px rgba(0,0,0,0.7), 0 0 20px rgba(230,59,48,0.08);
      animation: holoFloat 5s ease-in-out infinite; animation-delay: 2.1s;
      position: relative; overflow: hidden;
    }
    .vuln-card::after { content:''; position:absolute; top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent); pointer-events:none; }
    .vuln-row { display:flex; align-items:center; gap:8px; padding: 0.55rem 0; border-bottom: 0.5px solid rgba(255,255,255,0.05); }
    .vuln-row:last-child { border-bottom: none; padding-bottom: 0; }
    .vuln-rank { font-size: 11px; font-weight: 700; color: #444; width: 16px; flex-shrink: 0; }
    .vuln-info { flex: 1; min-width: 0; }
    .vuln-sub { font-size: 14px; font-weight: 600; color: #e0e0e0; }
    .vuln-pos { font-size: 11px; color: #555; margin-top: 1px; }
    .vuln-count { font-size: 11px; font-weight: 700; background: rgba(230,59,48,0.15); color: #e63b30; border-radius: 20px; padding: 2px 8px; white-space: nowrap; flex-shrink: 0; }
    .vuln-fix-btn { background: rgba(230,59,48,0.12); border: 0.5px solid rgba(230,59,48,0.3); border-radius: 8px; color: #e87d75; font-size: 11px; font-weight: 600; padding: 5px 10px; cursor: pointer; font-family: inherit; white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: background 0.15s; flex-shrink: 0; }
    .vuln-fix-btn:active { background: rgba(230,59,48,0.25); }

    /* ── Submission bars ── */
    .sub-bar-item { display: flex; align-items: center; gap: 10px; margin-bottom: 0.625rem; }
    .sub-bar-item:last-child { margin-bottom: 0; }
    .sub-bar-label { font-size: 13px; color: #aaa; width: 90px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sub-bar-track { flex: 1; background: rgba(255,255,255,0.05); border-radius: 4px; height: 6px; }
    .sub-bar-fill { background: linear-gradient(90deg, #c92b22, #e63b30); border-radius: 4px; height: 6px; box-shadow: 0 0 8px rgba(230,59,48,0.4); }
    .sub-bar-count { font-size: 12px; color: #555; width: 20px; text-align: right; flex-shrink: 0; }
    .roll-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 1rem; }

    /* ── Last session & upcoming cards ── */
    .last-session-card {
      background: linear-gradient(160deg, rgba(24,14,18,0.92) 0%, rgba(12,8,16,0.97) 100%);
      backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(230,59,48,0.2);
      border-top-color: rgba(230,80,60,0.35);
      border-radius: 16px; padding: 1rem 1.25rem; margin-bottom: 1rem; cursor: pointer;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 8px 32px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,0,0,0.3);
      transition: border-color 0.2s, box-shadow 0.2s;
      animation: holoFloat 5s ease-in-out infinite; animation-delay: 1.9s;
    }
    .last-session-card:hover { border-color: rgba(230,59,48,0.4); border-top-color: rgba(230,59,48,0.5); box-shadow: inset 0 1px 0 rgba(255,120,110,0.1), 0 8px 32px rgba(0,0,0,0.7), 0 0 28px rgba(230,59,48,0.15); }
    .upcoming-card {
      background: linear-gradient(160deg, rgba(24,14,18,0.92) 0%, rgba(12,8,16,0.97) 100%);
      backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(230,59,48,0.2);
      border-top-color: rgba(230,80,60,0.35);
      border-radius: 16px; padding: 1rem 1.25rem; margin-bottom: 1rem;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 8px 32px rgba(0,0,0,0.7);
      animation: holoFloat 5s ease-in-out infinite; animation-delay: 3.1s;
    }

    /* ── Quick action buttons ── */
    .quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 1.5rem; }
    .qa-btn {
      background: linear-gradient(160deg, rgba(24,14,18,0.92) 0%, rgba(12,8,16,0.97) 100%);
      backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(230,59,48,0.2);
      border-top-color: rgba(230,80,60,0.35);
      border-radius: 14px; padding: 1rem; font-size: 14px; font-weight: 600; color: #d0d0d0;
      cursor: pointer; text-align: center; font-family: inherit;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 8px 28px rgba(0,0,0,0.7);
      transition: all 0.2s;
      animation: holoFloat 5s ease-in-out infinite; animation-delay: 2.5s;
    }
    .qa-btn:nth-child(2) { animation-delay: 4.1s; }
    .qa-btn:nth-child(3) { animation-delay: 1.0s; }
    .qa-btn:nth-child(4) { animation-delay: 3.3s; }
    .qa-btn:hover { border-color: rgba(230,59,48,0.4); border-top-color: rgba(230,59,48,0.55); color: #ff8a83; box-shadow: inset 0 1px 0 rgba(255,120,110,0.1), 0 8px 28px rgba(0,0,0,0.7), 0 0 24px rgba(230,59,48,0.15); transform: translateY(-1px); }
    .qa-btn.primary {
      background: linear-gradient(160deg, rgba(50,15,15,0.92) 0%, rgba(25,8,10,0.97) 100%);
      border-color: rgba(230,59,48,0.4); border-top-color: rgba(230,59,48,0.55); color: #ff8a83;
      box-shadow: inset 0 1px 0 rgba(255,120,110,0.12), 0 8px 28px rgba(0,0,0,0.7), 0 0 20px rgba(230,59,48,0.12);
    }
    .qa-btn.primary:hover { box-shadow: inset 0 1px 0 rgba(255,120,110,0.18), 0 8px 28px rgba(0,0,0,0.7), 0 0 36px rgba(230,59,48,0.25); }

    /* ── Log modal pills ────────────────────────────────── */
    .pill-group { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 0.4rem; }
    .pill-group.large { gap: 8px; }
    .log-pill { background: rgba(8,8,8,0.78); border: 0.5px solid rgba(255,255,255,0.12); border-radius: 20px; padding: 0.55rem 1rem; font-size: 13px; color: #888; cursor: pointer; font-family: inherit; transition: all 0.12s; -webkit-tap-highlight-color: transparent; }
    .log-pill.large { flex: 1; padding: 0.875rem 0.5rem; font-size: 14px; text-align: center; }
    .log-pill.active { background: #e63b30; border-color: #e63b30; color: #fff; }
    .log-pill.sub-pill { font-size: 12px; padding: 0.35rem 0.75rem; }
    .counter-row { display: flex; align-items: center; gap: 12px; margin-top: 0.4rem; }
    .counter-btn { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.06); border: 0.5px solid rgba(255,255,255,0.12); color: #f0f0f0; font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: inherit; transition: background 0.12s; -webkit-tap-highlight-color: transparent; }
    .counter-btn:hover { background: rgba(230,59,48,0.2); border-color: #e63b30; }
    .counter-val { font-size: 22px; font-weight: 600; color: #f0f0f0; min-width: 28px; text-align: center; }
    .log-form-wrap { overflow-y: auto; max-height: calc(100vh - 68px - env(safe-area-inset-bottom, 0px) - 3rem); }
    .custom-sub-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
    .custom-sub-input { flex: 1; background: rgba(255,255,255,0.06); border: 0.5px solid rgba(255,255,255,0.18); border-radius: 8px; color: #f0f0f0; padding: 8px 12px; font-size: 14px; font-family: inherit; outline: none; }
    .custom-sub-input:focus { border-color: #e63b30; }
    .custom-sub-input::placeholder { color: #555; }
    .custom-sub-add-btn { background: #e63b30; border: none; border-radius: 8px; color: #fff; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; font-family: inherit; -webkit-tap-highlight-color: transparent; }
    .custom-sub-cancel-btn { background: rgba(255,255,255,0.06); border: 0.5px solid rgba(255,255,255,0.1); border-radius: 8px; color: #888; padding: 8px 10px; font-size: 14px; cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent; }

    /* ── Belt history ───────────────────────────────────── */
    .belt-history-timeline { position: relative; padding-left: 1.25rem; }
    .belt-history-timeline::before { content: ''; position: absolute; left: 5px; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,0.07); border-radius: 2px; }
    .bh-entry { position: relative; margin-bottom: 1.25rem; }
    .bh-dot { position: absolute; left: -1.25rem; top: 3px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.2); background: #0a0a0a; }
    .bh-date { font-size: 11px; color: #555; margin-bottom: 2px; }
    .bh-belt { font-size: 14px; font-weight: 500; color: #f0f0f0; }
    .bh-stripes { display: flex; gap: 4px; margin-top: 4px; }
    .bh-stripe { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); }
    .bh-stripe.filled { background: #f0f0f0; border-color: #f0f0f0; }
    .bh-notes { font-size: 12px; color: #555; margin-top: 4px; }
    .bh-add-form { background: rgba(255,255,255,0.03); border: 0.5px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 1rem; margin-top: 0.75rem; }

    /* ── Stripe selector in profile ─────────────────────── */
    .stripe-selector { display: flex; gap: 10px; margin-top: 0.4rem; }
    .stripe-sel-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.06); cursor: pointer; transition: all 0.15s; }

    /* ── Roll Timer ──────────────────────────────────────── */
    .roll-timer-fab {
      position: fixed; bottom: calc(68px + env(safe-area-inset-bottom, 0px) + 1rem); right: 1rem; z-index: 55;
      background: linear-gradient(135deg, rgba(220,45,35,0.95) 0%, rgba(160,22,15,0.98) 100%);
      border: 1px solid rgba(255,100,80,0.3); border-top-color: rgba(255,140,120,0.5);
      border-radius: 50px; padding: 0.55rem 1.1rem 0.55rem 0.9rem;
      color: white; font-size: 13px; font-weight: 700; cursor: pointer;
      box-shadow: 0 4px 20px rgba(230,59,48,0.5), 0 2px 8px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,150,130,0.2);
      display: flex; align-items: center; gap: 7px; letter-spacing: 0.2px; font-family: inherit;
      animation: holoFloat 4s ease-in-out infinite; transition: box-shadow 0.15s;
      -webkit-tap-highlight-color: transparent;
    }
    .roll-timer-fab:active { transform: scale(0.96); }

    /* Setup sheet backdrop */
    .timer-setup-backdrop {
      position: fixed; inset: 0; z-index: 56; display: none; background: transparent;
    }
    .timer-setup-backdrop.open { display: block; }
    /* Setup sheet */
    .timer-setup-sheet {
      position: fixed; bottom: calc(68px + env(safe-area-inset-bottom, 0px)); left: 0; right: 0; z-index: 57;
      background: linear-gradient(180deg, rgba(14,8,16,0.98) 0%, rgba(6,4,12,1) 100%);
      backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);
      border-top: 1px solid rgba(230,59,48,0.35);
      box-shadow: 0 -8px 40px rgba(0,0,0,0.7);
      padding: 0.75rem 1.5rem 1.25rem;
      transform: translateY(110%); transition: transform 0.32s cubic-bezier(0.32,0,0,1);
    }
    .timer-setup-sheet.open { transform: translateY(0); }
    .timer-setup-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
    .timer-sheet-handle { width: 36px; height: 4px; background: rgba(255,255,255,0.12); border-radius: 2px; margin: 0 auto 0; }
    .timer-setup-close { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1); border-radius: 50%; width: 28px; height: 28px; color: #666; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: inherit; }
    .timer-duration-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; color: #555; margin-bottom: 0.6rem; font-weight: 700; }
    .timer-presets { display: flex; gap: 8px; margin-bottom: 0.875rem; }
    .timer-preset-btn {
      flex: 1; background: linear-gradient(160deg, rgba(24,14,18,0.92) 0%, rgba(12,8,16,0.97) 100%);
      border: 1px solid rgba(230,59,48,0.22); border-top-color: rgba(230,80,60,0.35);
      border-radius: 12px; padding: 0.65rem 0.25rem;
      color: #777; font-size: 14px; font-weight: 700;
      cursor: pointer; font-family: inherit; text-align: center; transition: all 0.15s;
    }
    .timer-preset-btn.active {
      background: linear-gradient(135deg, rgba(50,15,15,0.95) 0%, rgba(25,8,10,0.98) 100%);
      border-color: rgba(230,59,48,0.6); color: #ff8a83;
      box-shadow: 0 0 16px rgba(230,59,48,0.2);
    }
    .timer-custom-row { display: flex; align-items: center; gap: 10px; margin-bottom: 1rem; }
    .timer-custom-label { font-size: 13px; color: #555; }
    .timer-custom-input {
      width: 58px; background: rgba(255,255,255,0.04);
      border: 1px solid rgba(230,59,48,0.25); border-radius: 10px;
      padding: 0.4rem 0.5rem; font-size: 16px; font-weight: 700;
      color: #f0f0f0; font-family: inherit; text-align: center;
    }
    .timer-custom-input:focus { outline: none; border-color: rgba(230,59,48,0.6); }
    .timer-custom-unit { font-size: 13px; color: #444; }
    .timer-start-btn {
      width: 100%; background: linear-gradient(135deg, #e63b30 0%, #c92b22 100%);
      border: none; border-radius: 14px; padding: 0.9rem;
      font-size: 16px; font-weight: 700; color: white; cursor: pointer; font-family: inherit;
      box-shadow: 0 4px 20px rgba(230,59,48,0.4), inset 0 1px 0 rgba(255,150,140,0.25);
      letter-spacing: 0.3px; -webkit-tap-highlight-color: transparent;
    }
    .timer-start-btn:active { transform: scale(0.98); }

    /* Active timer panel */
    .roll-timer-panel {
      position: fixed; bottom: calc(68px + env(safe-area-inset-bottom, 0px)); left: 0; right: 0; z-index: 56;
      background: linear-gradient(180deg, rgba(12,6,14,0.98) 0%, rgba(5,3,10,1) 100%);
      backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);
      border-top: 1px solid rgba(230,59,48,0.4);
      box-shadow: 0 -8px 48px rgba(0,0,0,0.8), 0 -1px 0 rgba(230,59,48,0.12);
      padding: 1rem 1.5rem 1.1rem; display: none;
    }
    .roll-timer-panel.visible { display: block; }
    .timer-panel-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
    .timer-round-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1.4px; color: #e63b30; font-weight: 700; }
    .timer-total-label { font-size: 11px; color: #3a3a3a; }
    .timer-main { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 0.875rem; }
    .timer-ring-wrap { position: relative; flex-shrink: 0; width: 80px; height: 80px; }
    .timer-ring { width: 80px; height: 80px; transform: rotate(-90deg); display: block; }
    .timer-ring-bg { fill: none; stroke: rgba(255,255,255,0.05); stroke-width: 7; }
    .timer-ring-fill { fill: none; stroke: #e63b30; stroke-width: 7; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(230,59,48,0.7)); }
    .timer-ring-fill.warning { stroke: #f0c040; filter: drop-shadow(0 0 5px rgba(240,192,64,0.7)); }
    .timer-ring-fill.done { stroke: #4ade80; filter: drop-shadow(0 0 5px rgba(74,222,128,0.7)); }
    .timer-ring-text {
      position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
      font-size: 11px; font-weight: 800; color: #888; letter-spacing: -0.3px;
      font-variant-numeric: tabular-nums;
    }
    .timer-info { flex: 1; }
    .timer-big-time {
      font-size: 52px; font-weight: 800; color: #f0f0f0; letter-spacing: -3px; line-height: 1;
      text-shadow: 0 0 30px rgba(230,59,48,0.25); font-variant-numeric: tabular-nums;
    }
    .timer-big-time.warning { color: #f0c040; text-shadow: 0 0 30px rgba(240,192,64,0.35); }
    .timer-big-time.done { color: #4ade80; text-shadow: 0 0 30px rgba(74,222,128,0.35); }
    .timer-status-msg { font-size: 12px; color: #444; margin-top: 5px; }
    .timer-actions { display: flex; gap: 10px; }
    .timer-act-btn {
      flex: 1; border: none; border-radius: 13px; padding: 0.72rem;
      font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit;
      letter-spacing: 0.2px; transition: all 0.15s; -webkit-tap-highlight-color: transparent;
    }
    .timer-act-btn.secondary { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); color: #666; }
    .timer-act-btn.secondary:active { background: rgba(255,255,255,0.09); }
    .timer-act-btn.primary { background: linear-gradient(135deg, #e63b30, #c92b22); color: white; box-shadow: 0 3px 14px rgba(230,59,48,0.35); }
    .timer-act-btn.primary:active { transform: scale(0.97); }
    .timer-act-btn.green { background: rgba(74,222,128,0.1); border: 1px solid rgba(74,222,128,0.25); color: #4ade80; }
    .timer-act-btn.green:active { background: rgba(74,222,128,0.18); }
    .timer-act-btn.next { background: linear-gradient(135deg, rgba(74,222,128,0.2), rgba(40,160,80,0.25)); border: 1px solid rgba(74,222,128,0.35); color: #4ade80; box-shadow: 0 0 16px rgba(74,222,128,0.12); }

    /* Post-roll log sheet */
    .timer-log-sheet { position: fixed; inset: 0; z-index: 200; display: none; align-items: flex-end; }
    .timer-log-sheet.open { display: flex; }
    .timer-log-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.65); }
    .timer-log-inner {
      position: relative; width: 100%;
      background: linear-gradient(180deg, rgba(14,8,16,0.99) 0%, rgba(6,4,12,1) 100%);
      backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);
      border-top: 1px solid rgba(230,59,48,0.3); border-radius: 20px 20px 0 0;
      padding: 0.75rem 1.5rem 2.5rem; max-height: 85vh; overflow-y: auto;
    }
    .timer-log-handle { width: 36px; height: 4px; background: rgba(255,255,255,0.12); border-radius: 2px; margin: 0 auto 1rem; }
    .timer-log-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.25rem; }
    .timer-log-title { font-size: 17px; font-weight: 700; color: #f0f0f0; }
    .timer-log-summary { font-size: 12px; color: #e63b30; margin-top: 3px; }
    .timer-skip-btn { background: none; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 0.3rem 0.75rem; font-size: 12px; color: #555; cursor: pointer; font-family: inherit; flex-shrink: 0; margin-top: 2px; }
    .stripe-sel-dot.active { background: #f0f0f0; border-color: #f0f0f0; }

    /* ── Dashboard accountability cards ─────────────────── */
    .dash-card {
      background: linear-gradient(160deg, rgba(24,14,18,0.92) 0%, rgba(12,8,16,0.97) 100%);
      backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
      border: 1px solid rgba(230,59,48,0.2);
      border-top-color: rgba(230,80,60,0.35);
      border-radius: 16px; padding: 1rem;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 8px 32px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,0,0,0.3);
      position: relative; overflow: hidden;
      animation: holoFloat 5s ease-in-out infinite; animation-delay: 0.8s;
    }
    .dash-card:nth-of-type(2) { animation-delay: 2.3s; }
    .dash-card:nth-of-type(3) { animation-delay: 3.8s; }
    .dash-card::after { content:''; position:absolute; top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent); pointer-events:none; }
    /* ── Achievement Badges ─────────────────────────────── */
    .badge-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
      gap: 1rem 0.5rem;
    }
    .badge-item {
      display: flex; flex-direction: column; align-items: center; gap: 5px;
      cursor: default;
    }
    .badge-img-wrap {
      position: relative; width: 64px; height: 64px;
    }
    .badge-img-wrap img {
      width: 100%; height: 100%; object-fit: contain;
      transition: filter 0.3s, opacity 0.3s;
    }
    .badge-item.earned .badge-img-wrap img {
      filter: drop-shadow(0 0 6px rgba(230,59,48,0.5));
    }
    .badge-item.earned { animation: holoFloat 5s ease-in-out infinite; }
    .badge-item.locked .badge-img-wrap img { filter: grayscale(1); opacity: 0.3; }
    .badge-lock {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 14px; opacity: 0.4;
      pointer-events: none;
    }
    .badge-name {
      font-size: 9px; font-weight: 700; color: #888;
      text-align: center; line-height: 1.3;
      text-transform: uppercase; letter-spacing: 0.4px;
      max-width: 68px;
    }
    .badge-item.earned .badge-name { color: #c0c0c0; }
    .badge-status {
      font-size: 8px; text-transform: uppercase; letter-spacing: 0.8px; font-weight: 700;
    }
    .badge-status.earned { color: #e63b30; }
    .badge-status.locked { color: #333; }

    /* ── Achievement toast ── */
    #achievementToast {
      position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%) translateY(20px);
      z-index: 999; background: linear-gradient(135deg, rgba(20,10,10,0.97) 0%, rgba(10,5,8,0.99) 100%);
      border: 0.5px solid rgba(230,59,48,0.5); border-radius: 16px;
      padding: 0.9rem 1.25rem; display: flex; align-items: center; gap: 12px;
      box-shadow: 0 0 40px rgba(230,59,48,0.3), 0 8px 32px rgba(0,0,0,0.6);
      opacity: 0; pointer-events: none; transition: opacity 0.4s, transform 0.4s;
      max-width: 320px; width: calc(100% - 3rem);
    }
    #achievementToast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
    .toast-badge-img { width: 52px; height: 52px; object-fit: contain; flex-shrink: 0; }
    .toast-text { flex: 1; }
    .toast-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: #e63b30; margin-bottom: 2px; }
    .toast-name { font-size: 15px; font-weight: 700; color: #f0f0f0; }
    .toast-desc { font-size: 12px; color: #666; margin-top: 2px; }

    .risk-banner {
      background: linear-gradient(135deg, rgba(40,25,0,0.9) 0%, rgba(20,14,0,0.95) 100%);
      border: 0.5px solid rgba(255,165,0,0.4);
      border-radius: 14px; padding: 0.75rem 1rem; color: #ffb347; font-size: 13px; margin-bottom: 1rem;
      box-shadow: 0 0 20px rgba(255,140,0,0.1), inset 0 1px 0 rgba(255,200,80,0.08);
      animation: holoFloat 5s ease-in-out infinite; animation-delay: 2.9s;
    }

    /* ── Skills tab ─────────────────────────────────────────────── */
    .skills-view { padding-top: 0.5rem; }
    .skills-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; }
    /* Floating back button — always visible above the brand header */
    .skills-back-float {
      position: fixed;
      top: calc(72px + 2.75rem);
      left: 1.25rem;
      z-index: 60;
      display: none;
      align-items: center;
      gap: 6px;
      background: rgba(20,20,20,0.92);
      border: 0.5px solid rgba(255,255,255,0.22);
      border-radius: 20px;
      color: #f0f0f0;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      padding: 0.45rem 1rem 0.45rem 0.7rem;
      line-height: 1;
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      box-shadow: 0 2px 12px rgba(0,0,0,0.5);
    }
    .skills-back-float.visible { display: flex; }
    .skills-back-float:active { background: rgba(40,40,40,0.95); }

    /* Position cards grid */
    .positions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem; }
    .position-card {
      background: linear-gradient(160deg, rgba(24,14,18,0.92) 0%, rgba(10,7,14,0.97) 100%);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border: 1px solid rgba(230,59,48,0.22);
      border-top-color: rgba(230,80,60,0.4);
      border-radius: 18px;
      padding: 1.1rem 1rem;
      cursor: pointer;
      transition: transform 0.22s, border-color 0.22s, box-shadow 0.22s;
      position: relative;
      overflow: hidden;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 8px 32px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,0,0,0.3);
      animation: holoFloat 5s ease-in-out infinite; animation-delay: 0.7s;
    }
    .position-card:nth-child(2) { animation-delay: 2.2s; }
    .position-card:nth-child(3) { animation-delay: 3.7s; }
    .position-card:nth-child(4) { animation-delay: 1.2s; }
    .position-card:nth-child(5) { animation-delay: 4.5s; }
    .position-card:nth-child(6) { animation-delay: 0.3s; }
    .position-card:nth-child(7) { animation-delay: 2.8s; }
    .position-card:nth-child(8) { animation-delay: 4.1s; }
    .position-card:active { transform: scale(0.97); }
    .position-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      background: var(--pos-color, #e63b30);
      box-shadow: 0 0 12px var(--pos-color, #e63b30);
    }
    .position-card::after {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 40%;
      background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 100%);
      pointer-events: none;
    }
    .position-card:hover { border-color: rgba(255,255,255,0.2); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 8px 30px rgba(0,0,0,0.6), 0 0 20px var(--pos-color, rgba(230,59,48,0.15)); transform: translateY(-2px); }
    .pos-icon { margin-bottom: 0.5rem; display: flex; justify-content: center; color: var(--pos-color, #e63b30); filter: drop-shadow(0 0 6px var(--pos-color, #e63b30)); }
    .pos-name { font-size: 14px; font-weight: 700; color: #f0f0f0; margin-bottom: 0.25rem; }
    .pos-desc { font-size: 11px; color: #555; line-height: 1.4; margin-bottom: 0.75rem; }
    .pos-meta { display: flex; justify-content: space-between; align-items: center; }
    .pos-count { font-size: 11px; color: #444; }
    .pos-practiced { font-size: 11px; color: var(--pos-color, #e63b30); font-weight: 600; text-shadow: 0 0 8px var(--pos-color, rgba(230,59,48,0.5)); }

    /* D3 tree view */
    .tree-container {
      position: relative;
      width: 100%;
      height: calc(100vh - 200px);
      min-height: 400px;
      border-radius: 18px;
      overflow: hidden;
      background: radial-gradient(ellipse at 50% 50%, rgba(20,8,8,0.95) 0%, rgba(4,4,6,0.99) 100%);
      border: 0.5px solid rgba(255,255,255,0.07);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 32px rgba(0,0,0,0.7);
    }
    .tree-svg { width: 100%; height: 100%; }

    /* Legend */
    .tree-legend { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
    .legend-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #666; }
    .legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

    /* Technique detail bottom sheet */
    .tech-sheet {
      position: fixed;
      bottom: calc(64px + env(safe-area-inset-bottom, 0px));
      left: 0; right: 0;
      background: linear-gradient(180deg, rgba(16,10,10,0.98) 0%, rgba(8,6,8,0.99) 100%);
      backdrop-filter: blur(40px);
      -webkit-backdrop-filter: blur(40px);
      border-top: 0.5px solid rgba(230,59,48,0.2);
      border-radius: 22px 22px 0 0;
      padding: 1rem 1.5rem 1.25rem;
      /* Closed: slide PAST its own height + the bottom anchor offset so no
         sliver is left covering the nav (sheet is anchored 64px above bottom) */
      transform: translateY(calc(100% + 64px + env(safe-area-inset-bottom, 0px) + 24px));
      z-index: 200;
      max-height: 55vh;
      overflow-y: auto;
      visibility: hidden;
      transition: transform 0.32s cubic-bezier(0.32,0.72,0,1), visibility 0s 0.32s;
      box-shadow: 0 -4px 60px rgba(0,0,0,0.8), 0 -1px 0 rgba(230,59,48,0.15), inset 0 1px 0 rgba(255,255,255,0.06);
    }
    .tech-sheet.open { transform: translateY(0); visibility: visible; transition: transform 0.32s cubic-bezier(0.32,0.72,0,1), visibility 0s; }
    .tech-sheet-handle { width: 36px; height: 4px; background: rgba(255,255,255,0.15); border-radius: 2px; margin: 0 auto 1rem; }
    .tech-sheet-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.75rem; }
    .tech-sheet-name { font-size: 20px; font-weight: 700; color: #f0f0f0; }
    .tech-sheet-close { background: rgba(255,255,255,0.1); border: 0.5px solid rgba(255,255,255,0.15); border-radius: 50%; color: #e0e0e0; font-size: 16px; cursor: pointer; line-height: 1; padding: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .tech-sheet-close:active { background: rgba(255,255,255,0.2); }
    .tech-sheet-backdrop { position: fixed; inset: 0; z-index: 199; display: none; }
    .tech-sheet-backdrop.open { display: block; }
    .tech-badges { display: flex; gap: 0.5rem; margin-bottom: 0.875rem; flex-wrap: wrap; }
    .tech-badge { font-size: 11px; padding: 3px 10px; border-radius: 20px; font-weight: 500; }
    .tech-badge.belt-white  { background: rgba(255,255,255,0.1); color: #ccc; }
    .tech-badge.belt-blue   { background: rgba(74,144,226,0.2); color: #74aaff; }
    .tech-badge.belt-purple { background: rgba(139,92,246,0.2); color: #c084fc; }
    .tech-badge.belt-brown  { background: rgba(139,90,43,0.2); color: #c9956c; }
    .tech-badge.type-submission { background: rgba(230,59,48,0.15); color: #ff8a83; }
    .tech-badge.type-sweep      { background: rgba(251,191,36,0.15); color: #fcd34d; }
    .tech-badge.type-escape     { background: rgba(74,222,128,0.15); color: #86efac; }
    .tech-badge.type-transition { background: rgba(139,92,246,0.15); color: #c084fc; }
    .tech-badge.type-control    { background: rgba(6,182,212,0.15); color: #67e8f9; }
    .tech-badge.type-takedown   { background: rgba(245,158,11,0.15); color: #fcd34d; }
    .tech-badge.type-defense    { background: rgba(74,222,128,0.15); color: #86efac; }
    .tech-sheet-stat { font-size: 12px; color: #666; margin-bottom: 0.875rem; }
    .tech-sheet-stat strong { color: #e63b30; }
    .tech-links-label { font-size: 11px; color: #444; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 0.5rem; }
    .tech-links-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
    .tech-link-pill { font-size: 12px; padding: 4px 12px; border-radius: 20px; background: rgba(255,255,255,0.05); border: 0.5px solid rgba(255,255,255,0.1); color: #aaa; cursor: pointer; }
    .tech-link-pill:hover { border-color: #e63b30; color: #e63b30; }
    .tech-ask-btn { width: 100%; padding: 0.875rem; background: #e63b30; border: none; border-radius: 10px; color: white; font-size: 14px; font-weight: 600; cursor: pointer; }
    .tech-ask-btn:hover { background: #cc2f25; }
    .tech-learn-btn { width: 100%; padding: 0.875rem; background: rgba(230,59,48,0.12); border: 0.5px solid rgba(230,59,48,0.3); border-radius: 10px; color: #ff8a83; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; }
    .tech-learn-btn:hover { background: rgba(230,59,48,0.2); }
    .tech-description { background: rgba(255,255,255,0.04); border-radius: 10px; padding: 0.875rem 1rem; font-size: 13px; color: #ccc; line-height: 1.6; margin-bottom: 0.875rem; border: 0.5px solid rgba(255,255,255,0.07); }
    .tech-deeper-btn { width: 100%; padding: 0.75rem; background: #e63b30; border: none; border-radius: 10px; color: white; font-size: 13px; font-weight: 600; cursor: pointer; margin-top: 0.5rem; }
    .tech-deeper-btn:hover { background: #cc2f25; }
    .tech-loading { display: flex; gap: 6px; align-items: center; justify-content: center; padding: 1rem; color: #555; font-size: 13px; }
    .tech-loading .dot { width: 6px; height: 6px; border-radius: 50%; background: #e63b30; animation: pulse 1.2s ease-in-out infinite; }
    .tech-loading .dot:nth-child(2) { animation-delay: 0.2s; }
    .tech-loading .dot:nth-child(3) { animation-delay: 0.4s; }

    /* Node practice glow */
    .practiced-node { filter: drop-shadow(0 0 6px rgba(230,59,48,0.6)); }

    /* ── Nemesis ─────────────────────────────────────────── */
    .nemesis-view { padding: 1rem; }
    .nemesis-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
    .nemesis-title { font-size: 18px; font-weight: 700; color: #e0e0e0; }
    .nemesis-card {
      background: linear-gradient(160deg, rgba(24,14,18,0.92) 0%, rgba(12,8,16,0.97) 100%);
      backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
      border: 1px solid rgba(230,59,48,0.2);
      border-top-color: rgba(230,80,60,0.35);
      border-radius: 16px; padding: 1rem; margin-bottom: 0.875rem; cursor: pointer;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 8px 32px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,0,0,0.3);
      position: relative; overflow: hidden;
      transition: border-color 0.2s, box-shadow 0.2s;
      animation: holoFloat 5s ease-in-out infinite;
    }
    .nemesis-card:nth-child(2) { animation-delay: 1.6s; }
    .nemesis-card:nth-child(3) { animation-delay: 3.1s; }
    .nemesis-card:nth-child(4) { animation-delay: 4.4s; }
    .nemesis-card:nth-child(5) { animation-delay: 2.3s; }
    .nemesis-card::after { content:''; position:absolute; top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent); pointer-events:none; }
    .nemesis-card:hover { border-color: rgba(230,59,48,0.45); box-shadow: inset 0 1px 0 rgba(255,120,110,0.12), 0 8px 32px rgba(0,0,0,0.7), 0 0 28px rgba(230,59,48,0.18); }
    .nemesis-card-top { display: flex; justify-content: space-between; align-items: flex-start; }
    .nemesis-name { font-size: 15px; font-weight: 600; color: #e0e0e0; }
    .nemesis-meta { font-size: 12px; color: #555; margin-top: 2px; }
    .nemesis-type-badge { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; padding: 2px 8px; border-radius: 20px; font-weight: 600; }
    .nemesis-type-badge.partner { background: rgba(255,255,255,0.07); color: #888; }
    .nemesis-type-badge.competitor { background: rgba(230,59,48,0.15); color: #e63b30; border: 0.5px solid rgba(230,59,48,0.3); }
    .nemesis-record { display: flex; gap: 12px; margin-top: 0.75rem; }
    /* In the detail view the record strip is a standalone slide — match the holo cards */
    .nemesis-view > .nemesis-record {
      background: linear-gradient(160deg, rgba(24,14,18,0.92) 0%, rgba(12,8,16,0.97) 100%);
      backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
      border: 1px solid rgba(230,59,48,0.2);
      border-top-color: rgba(230,80,60,0.35);
      border-radius: 16px; padding: 1rem;
      justify-content: space-around;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 8px 32px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,0,0,0.3);
      animation: holoFloat 5s ease-in-out infinite; animation-delay: 1.2s;
    }
    .nemesis-record-stat { text-align: center; }
    .nemesis-record-stat .val { font-size: 20px; font-weight: 700; }
    .nemesis-record-stat .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: #555; }
    .val-w { color: #4ade80; }
    .val-l { color: #e63b30; }
    .val-d { color: #888; }
    .nemesis-detail-back { display: flex; align-items: center; gap: 6px; color: #666; font-size: 13px; cursor: pointer; margin-bottom: 1rem; background: none; border: none; padding: 0; }
    .nemesis-detail-back svg { width: 16px; height: 16px; fill: currentColor; }
    .nemesis-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #555; margin: 1.25rem 0 0.5rem; }
    .roll-item { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 0; border-bottom: 0.5px solid rgba(255,255,255,0.05); }
    .roll-result { font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 20px; }
    .roll-result.win { background: rgba(74,222,128,0.15); color: #4ade80; }
    .roll-result.loss { background: rgba(230,59,48,0.15); color: #e63b30; }
    .roll-result.draw { background: rgba(255,255,255,0.07); color: #888; }
    .roll-date { font-size: 12px; color: #555; }
    .roll-notes { font-size: 12px; color: #888; margin-top: 2px; }
    .gameplan-box {
      background: linear-gradient(150deg, rgba(26,12,12,0.95) 0%, rgba(10,5,8,0.98) 100%);
      backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(230,59,48,0.35);
      border-top-color: rgba(255,90,70,0.5);
      border-radius: 16px; padding: 1rem 1.1rem; margin-top: 0.75rem;
      font-size: 13px; color: #ccc; line-height: 1.6; white-space: pre-wrap;
      box-shadow: inset 0 1px 0 rgba(255,120,100,0.1), 0 8px 32px rgba(0,0,0,0.7), 0 0 24px rgba(230,59,48,0.12);
      position: relative; overflow: hidden;
      animation: holoFloat 5s ease-in-out infinite; animation-delay: 0.8s;
    }
    .gameplan-box::after { content:''; position:absolute; top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,rgba(255,100,80,0.3),transparent); pointer-events:none; }
    .result-picker { display: flex; gap: 8px; margin-bottom: 0.75rem; }
    .result-pick-btn { flex: 1; padding: 0.5rem; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; border: 0.5px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); color: #888; transition: all 0.15s; }
    .result-pick-btn.active-w { background: rgba(74,222,128,0.15); color: #4ade80; border-color: rgba(74,222,128,0.4); }
    .result-pick-btn.active-l { background: rgba(230,59,48,0.15); color: #e63b30; border-color: rgba(230,59,48,0.4); }
    .result-pick-btn.active-d { background: rgba(255,255,255,0.07); color: #aaa; border-color: rgba(255,255,255,0.2); }
    .nemesis-empty { text-align: center; padding: 3rem 1rem; color: #444; font-size: 14px; }
    .nemesis-empty svg { width: 40px; height: 40px; fill: #333; margin: 0 auto 1rem; display: block; }
  </style>
</head>
<body>
  <!-- Boot screen: covers the app until real user data is rendered -->
  <div id="bootScreen" style="position:fixed;inset:0;z-index:9999;background:#05040c;display:flex;align-items:center;justify-content:center;transition:opacity 0.35s ease;">
    <img src="/Flowmora.svg" alt="Flowmora" style="width:230px;opacity:0.92;">
  </div>
  <img id="bgImage" src="/bg.jpeg" alt="">
  <div class="app">
    <div class="header">
      <div class="logo-block">
        <img src="/Flowmora.svg" class="logo-img" alt="Flowmora">
        <div class="brand-block">
          <span class="brand-name">FLOWMORA</span>
          <span class="brand-tagline">Jiu-Jitsu Evolved.</span>
        </div>
      </div>
      <div class="header-controls">
        <div class="voice-toggle" onclick="toggleVoice()">
          <div class="toggle-track" id="voiceTrack"><div class="toggle-thumb"></div></div>
          <span id="voiceLabel">Voice off</span>
        </div>
        <div id="userSection" class="user-display" style="display:none;">
          <span class="user-email" id="userEmail"></span>
          <button class="belt-badge belt-blue" id="beltBadge" onclick="openProfile()">Blue</button>
          <button class="signout-btn" onclick="signOut()">Sign out</button>
        </div>
      </div>
    </div>

    <div id="mentorView" style="display:none;">
      <div id="inputSection">
        <div class="card">
          <div class="card-label">Describe your problem</div>
          <div class="input-row">
            <textarea id="problem" rows="4" placeholder="e.g. I keep getting my guard passed when my opponent stands up... or tap the mic and speak"></textarea>
            <div class="mic-btn" id="mainMic" onclick="toggleMainMic()">
              <svg viewBox="0 0 24 24"><path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm-1 1.93c-3.94-.49-7-3.85-7-7.93H5c0 3.53 2.61 6.43 6 6.92V19h2v-3.08c3.39-.49 6-3.39 6-6.92h1c0 4.08-3.06 7.44-7 7.93V19h-2v-3.07z"/></svg>
            </div>
          </div>
          <div class="listening-indicator" id="mainListening">Listening... speak now</div>
          <button class="submit-btn" id="submitBtn" onclick="getStrategy()" disabled>Ask the Professor ↗</button>
        </div>
      </div>

      <div id="results" style="display:none;">
        <div id="toolActivity" class="tool-activity"></div>
        <div id="resultsContent"></div>
        <div class="chat-section">
          <div class="section-title">Continue the conversation</div>
          <div class="chat-messages" id="chatMessages"></div>
          <div id="speakingIndicator" class="speaking-indicator">🔊 Coach is speaking...</div>
          <div class="chat-input-row">
            <div class="chat-input-wrap">
              <input type="text" class="chat-input" id="chatInput" placeholder="Ask a follow-up or tap mic to speak..." onkeydown="if(event.key==='Enter') sendChat()" />
              <div class="chat-mic" id="chatMic" onclick="toggleChatMic()">
                <svg viewBox="0 0 24 24"><path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm-1 1.93c-3.94-.49-7-3.85-7-7.93H5c0 3.53 2.61 6.43 6 6.92V19h2v-3.08c3.39-.49 6-3.39 6-6.92h1c0 4.08-3.06 7.44-7 7.93V19h-2v-3.07z"/></svg>
              </div>
            </div>
            <button class="chat-send" id="chatSend" onclick="sendChat()">Send ↗</button>
          </div>
        </div>
        <br>
        <button class="submit-btn" style="background:rgba(255,255,255,0.05);color:#888;border:0.5px solid rgba(255,255,255,0.1);" onclick="resetApp()">Start new session</button>
      </div>

      <div id="loadingState" style="display:none;">
        <div class="loading"><div class="dot"></div><div class="dot"></div><div class="dot"></div><span id="loadingText">building your game plan...</span></div>
      </div>
    </div>

    <div id="dashboardView" class="dashboard-view"></div>

    <div id="progressView" class="progress-view"></div>

    <div id="calendarView" class="calendar-view"></div>

    <div id="skillsView" style="display:none;"></div>

    <div id="nemesisView" style="display:none;"></div>
  </div>

  <script>
    // Supabase init
    const { createClient } = window.supabase;
    const sb = createClient(
      'https://ptbhbljnnegmefooduil.supabase.co',
      'sb_publishable_bamk3TOuWKodGsW70BIIZQ_P0yHG8Iz'
    );

    // Escape user-entered text before inserting into innerHTML (XSS protection)
    function esc(str) {
      return String(str ?? '').replace(/[&<>"']/g, c => (
        { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]
      ));
    }

    // ── Native shell (Capacitor) support ─────────────────────────────────
    // Inside the iOS/Android app the page is served from capacitor://localhost,
    // so relative /api/* calls must go to the production backend instead.
    const IS_NATIVE = !!(window.Capacitor && window.Capacitor.isNativePlatform && window.Capacitor.isNativePlatform());
    const API_BASE = IS_NATIVE ? 'https://flowmorajiujitsu.com' : '';
    function api(path) { return API_BASE + path; }

    // Open an external URL: in-app browser sheet on native, new tab on web
    function openExternal(url) {
      const Browser = window.Capacitor?.Plugins?.Browser;
      if (IS_NATIVE && Browser) { Browser.open({ url }); return; }
      window.open(url, '_blank');
    }

    // ── Premium: authenticated AI calls + paywall ─────────────────────────
    // Set this to the Stripe checkout link once payments are live
    const PREMIUM_CHECKOUT_URL = '';

    async function aiFetch(path, body, { silent = false } = {}) {
      let token = null;
      try { token = (await sb.auth.getSession())?.data?.session?.access_token || null; } catch (e) {}
      const res = await fetch(api(path), {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', ...(token ? { Authorization: `Bearer ${token}` } : {}) },
        body: JSON.stringify(body)
      });
      if (res.status === 402) {
        if (!silent) showPaywall();
        const err = new Error('ai_limit');
        err.isLimit = true;
        throw err;
      }
      if (!res.ok) {
        let msg = `Request failed (${res.status})`;
        try { const j = await res.json(); if (j.error) msg = `${j.error} (${res.status})`; } catch (e) {}
        throw new Error(msg);
      }
      return res;
    }

    function showPaywall() {
      if (document.getElementById('paywallSheet')) return;
      const el = document.createElement('div');
      el.id = 'paywallSheet';
      el.style.cssText = 'position:fixed;inset:0;z-index:500;background:rgba(3,2,8,0.92);display:flex;align-items:center;justify-content:center;padding:1.25rem;';
      el.innerHTML = `
        <div style="width:100%;max-width:400px;background:linear-gradient(160deg,rgba(26,12,12,0.97) 0%,rgba(10,5,8,0.99) 100%);border:1px solid rgba(230,59,48,0.4);border-top-color:rgba(255,90,70,0.6);border-radius:20px;padding:1.75rem 1.5rem;box-shadow:0 24px 80px rgba(0,0,0,0.8),0 0 40px rgba(230,59,48,0.15);">
          <div style="font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:#e63b30;font-weight:600;margin-bottom:0.5rem;">Flowmora Premium</div>
          <div style="font-size:20px;font-weight:700;color:#f5f5f5;line-height:1.3;margin-bottom:0.5rem;">You've used your free coaching for this month</div>
          <div style="font-size:13px;color:#888;line-height:1.55;margin-bottom:1.25rem;">Your free plan includes 25 AI coaching actions a month. Premium removes the limit.</div>
          <div style="font-size:13px;color:#ccc;line-height:2;margin-bottom:1.25rem;">
            Unlimited AI mentor conversations<br>
            Unlimited post-session debriefs<br>
            Unlimited nemesis game plans<br>
            Unlimited voice session logging
          </div>
          ${PREMIUM_CHECKOUT_URL
            ? `<button onclick="openExternal(PREMIUM_CHECKOUT_URL)" style="width:100%;background:#e63b30;border:none;border-radius:12px;color:#fff;font-size:15px;font-weight:700;padding:0.9rem;cursor:pointer;font-family:inherit;">Upgrade to Premium</button>`
            : `<div style="width:100%;background:rgba(255,255,255,0.06);border:0.5px solid rgba(255,255,255,0.12);border-radius:12px;color:#aaa;font-size:13px;font-weight:600;padding:0.9rem;text-align:center;">Premium launches soon — your limit resets on the 1st</div>`}
          <button onclick="document.getElementById('paywallSheet').remove()" style="display:block;margin:0.9rem auto 0;background:none;border:none;color:#555;font-size:12px;cursor:pointer;font-family:inherit;">Not now</button>
        </div>`;
      document.body.appendChild(el);
    }

    // State
    let currentUser = null;
    let currentSession = null;
    let cachedSessions = [];
    let beltHistory = [];
    let nemesisList = [];
    let nemesisRolls = {};
    let activeNemesisId = null;
    let nemesisRollResult = 'win';
    let drillData = {};
    let conversationHistory = [];
    let voiceEnabled = false;
    let mainRecognition = null;
    let chatRecognition = null;
    let isMainListening = false;
    let isChatListening = false;
    let authMode = 'signin';
    let userProfile = { belt: 'blue', stripes: 0, name: '', years: '', gym: '', target_promotion: '', weeklyGoal: 3 };
    let _selectedBelt = 'blue';
    let _selectedStripes = 0;
    let _selectedWeeklyGoal = 3;

    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

    // Auth state listener — pre-load sessions so the mentor always knows your history
    function hideBootScreen() {
      const b = document.getElementById('bootScreen');
      if (!b) return;
      b.style.opacity = '0';
      setTimeout(() => b.remove(), 400);
    }
    // Failsafe: never leave the boot screen up longer than 6s, even if a load hangs
    setTimeout(hideBootScreen, 6000);

    sb.auth.onAuthStateChange(async (event, session) => {
      currentUser = session?.user || null;
      if (currentUser) {
        document.getElementById('authModal').style.display = 'none';
        document.getElementById('userEmail').textContent = currentUser.email;
        document.getElementById('userSection').style.display = 'flex';
        // Load profile from user metadata
        const meta = currentUser.user_metadata || {};
        userProfile = {
          belt: meta.belt || 'blue',
          stripes: meta.stripes !== undefined ? parseInt(meta.stripes) : 0,
          name: meta.display_name || '',
          years: meta.years_training || '',
          gym: meta.gym || '',
          target_promotion: meta.target_promotion || '',
          weeklyGoal: meta.weekly_goal !== undefined ? parseInt(meta.weekly_goal) : 3
        };
        applyBeltBadge(userProfile.belt);
        // First-run: no onboarded flag and no name set means brand-new user
        if (!meta.onboarded && !meta.display_name) setTimeout(showOnboarding, 400);
        // Load real data immediately, then reveal the app — the boot screen
        // hides the generic placeholder dashboard until this completes
        (async () => {
          try {
            const { data } = await sb.from('sessions').select('*').order('created_at', { ascending: false }).limit(200);
            if (data) cachedSessions = data.map(s => ({ ...s, weaknessFlag: s.weakness_flag, strengthFlag: s.strength_flag, rollingRounds: s.rolling_rounds }));
          } catch (_) {}
          try { await loadBeltHistory(); } catch (_) {}
          try { await loadNemesis(); } catch (_) {}
          renderDashboard();
          hideBootScreen();
          fetchCalendarEventsSilent();
        })();
      } else {
        document.getElementById('authModal').style.display = 'flex';
        document.getElementById('userSection').style.display = 'none';
        hideBootScreen();
        cachedSessions = [];
        beltHistory = [];
        nemesisList = [];
        nemesisRolls = {};
        _seenBadges = null;
        userProfile = { belt: 'blue', stripes: 0, name: '', years: '', gym: '', target_promotion: '', weeklyGoal: 3 };
      }
    });

    // Auth functions
    function switchAuthTab(mode) {
      authMode = mode;
      document.querySelectorAll('.auth-tab').forEach((t, i) => {
        t.classList.toggle('active', (i === 0 && mode === 'signin') || (i === 1 && mode === 'signup'));
      });
      document.getElementById('authBtn').textContent = mode === 'signin' ? 'Sign In' : 'Create Account';
      document.getElementById('authError').style.display = 'none';
      document.getElementById('authSuccess').style.display = 'none';
    }

    async function handleAuth() {
      const email = document.getElementById('authEmail').value.trim();
      const password = document.getElementById('authPassword').value;
      const btn = document.getElementById('authBtn');
      const errorEl = document.getElementById('authError');
      const successEl = document.getElementById('authSuccess');

      if (!email || !password) {
        errorEl.textContent = 'Please enter your email and password.';
        errorEl.style.display = 'block';
        return;
      }

      btn.disabled = true;
      btn.textContent = 'Loading...';
      errorEl.style.display = 'none';
      successEl.style.display = 'none';

      if (authMode === 'signin') {
        const { error } = await sb.auth.signInWithPassword({ email, password });
        if (error) {
          errorEl.textContent = error.message;
          errorEl.style.display = 'block';
          btn.disabled = false;
          btn.textContent = 'Sign In';
        }
      } else {
        const { error } = await sb.auth.signUp({ email, password });
        if (error) {
          errorEl.textContent = error.message;
          errorEl.style.display = 'block';
          btn.disabled = false;
          btn.textContent = 'Create Account';
        } else {
          successEl.textContent = 'Check your email to confirm your account, then sign in.';
          successEl.style.display = 'block';
          btn.disabled = false;
          btn.textContent = 'Create Account';
          switchAuthTab('signin');
        }
      }
    }

    async function signOut() {
      await sb.auth.signOut();
    }

    // Profile
    const BELT_COLORS = { white: 'belt-white', blue: 'belt-blue', purple: 'belt-purple', brown: 'belt-brown', black: 'belt-black' };

    function applyBeltBadge(belt) {
      const badge = document.getElementById('beltBadge');
      if (!badge) return;
      badge.className = 'belt-badge ' + (BELT_COLORS[belt] || 'belt-blue');
      badge.textContent = belt.charAt(0).toUpperCase() + belt.slice(1);
    }

    function openProfile() {
      _selectedBelt = userProfile.belt;
      _selectedStripes = userProfile.stripes || 0;
      _selectedWeeklyGoal = userProfile.weeklyGoal || 3;
      document.getElementById('profileName').value = userProfile.name;
      document.getElementById('profileYears').value = userProfile.years;
      document.getElementById('profileGym').value = userProfile.gym;
      document.getElementById('profileTargetPromotion').value = userProfile.target_promotion || '';
      // Sync belt selector UI
      document.querySelectorAll('.belt-option').forEach(el => {
        el.classList.toggle('selected', el.dataset.belt === _selectedBelt);
      });
      // Sync stripe dots
      syncStripeDots(_selectedStripes);
      // Sync weekly goal pills
      document.querySelectorAll('.wg-pill').forEach(el => {
        el.classList.toggle('active', parseInt(el.dataset.goal) === _selectedWeeklyGoal);
      });
      document.getElementById('profileSaved').style.display = 'none';
      document.getElementById('profileSaveBtn').disabled = false;
      document.getElementById('profileModal').style.display = 'flex';
      document.body.style.overflow = 'hidden';
    }

    function selectStripes(n) {
      // Clicking the same dot again deselects (sets to n-1), clicking fills up to n
      _selectedStripes = (_selectedStripes === n) ? n - 1 : n;
      if (_selectedStripes < 0) _selectedStripes = 0;
      syncStripeDots(_selectedStripes);
    }

    function syncStripeDots(n) {
      document.querySelectorAll('.stripe-sel-dot').forEach((dot, i) => {
        dot.classList.toggle('active', i < n);
      });
    }

    function closeProfile() {
      document.getElementById('profileModal').style.display = 'none';
      document.body.style.overflow = '';
    }

    function selectBelt(belt) {
      _selectedBelt = belt;
      document.querySelectorAll('.belt-option').forEach(el => {
        el.classList.toggle('selected', el.dataset.belt === belt);
      });
    }

    function selectWeeklyGoal(n) {
      _selectedWeeklyGoal = n;
      document.querySelectorAll('.wg-pill').forEach(el => {
        el.classList.toggle('active', parseInt(el.dataset.goal) === n);
      });
    }

    async function saveProfile() {
      const btn = document.getElementById('profileSaveBtn');
      btn.disabled = true;
      btn.textContent = 'Saving...';
      const name = document.getElementById('profileName').value.trim();
      const years = document.getElementById('profileYears').value.trim();
      const gym = document.getElementById('profileGym').value.trim();
      const target_promotion = document.getElementById('profileTargetPromotion').value.trim();
      const { error } = await sb.auth.updateUser({
        data: { belt: _selectedBelt, stripes: _selectedStripes, display_name: name, years_training: years, gym, target_promotion, weekly_goal: _selectedWeeklyGoal }
      });
      if (error) {
        btn.disabled = false;
        btn.textContent = 'Save profile';
        alert('Could not save profile: ' + error.message);
        return;
      }
      userProfile = { belt: _selectedBelt, stripes: _selectedStripes, name, years, gym, target_promotion, weeklyGoal: _selectedWeeklyGoal };
      applyBeltBadge(_selectedBelt);
      btn.textContent = 'Save profile';
      btn.disabled = false;
      document.getElementById('profileSaved').style.display = 'block';
      setTimeout(() => {
        document.getElementById('profileSaved').style.display = 'none';
        closeProfile();
      }, 1200);
    }

    // ── First-run onboarding ──────────────────────────────────────────────
    const onboardState = { step: 1, name: '', belt: 'white', years: '', goal: 3, problem: '' };

    function showOnboarding() {
      onboardState.step = 1;
      renderOnboard();
      document.getElementById('onboardModal').classList.add('open');
      document.body.style.overflow = 'hidden';
    }

    function renderOnboard() {
      const card = document.getElementById('onboardCard');
      const s = onboardState;
      const dots = [1,2,3].map(i => `<div class="onboard-dot ${i <= s.step ? 'done' : ''}"></div>`).join('');
      const BELTS = { white:'#f0f0f0', blue:'#4a90e2', purple:'#7b4fa6', brown:'#8B4513', black:'#333' };

      if (s.step === 1) {
        card.innerHTML = `
          <div class="onboard-progress">${dots}</div>
          <div class="onboard-title">Welcome to Flowmora</div>
          <div class="onboard-sub">Your AI mentor on the mats. Let's set up your corner — 60 seconds, three questions.</div>
          <div class="form-group">
            <div class="form-label">What should your coach call you?</div>
            <input type="text" id="onboardName" class="log-input" placeholder="First name" maxlength="40" value="${esc(s.name)}">
          </div>
          <div class="form-group">
            <div class="form-label">Your belt</div>
            <div class="onboard-belt-row">
              ${Object.entries(BELTS).map(([b, hex]) => `
                <button class="onboard-belt ${s.belt === b ? 'active' : ''}" onclick="onboardSetBelt('${b}')">
                  <span class="belt-swatch" style="background:${hex};"></span>${b.charAt(0).toUpperCase() + b.slice(1)}
                </button>`).join('')}
            </div>
          </div>
          <button class="onboard-next-btn" onclick="onboardNext()">Continue</button>`;
      } else if (s.step === 2) {
        card.innerHTML = `
          <div class="onboard-progress">${dots}</div>
          <div class="onboard-title">Your training rhythm</div>
          <div class="onboard-sub">This sets your weekly goal — your coach holds you to it.</div>
          <div class="form-group">
            <div class="form-label">How long have you been training?</div>
            <div class="onboard-pills">
              ${['Under 1 year','1-3 years','3-5 years','5-10 years','10+ years'].map(y => `
                <button class="onboard-pill ${s.years === y ? 'active' : ''}" onclick="onboardSetYears('${y}')">${y}</button>`).join('')}
            </div>
          </div>
          <div class="form-group">
            <div class="form-label">Sessions per week you're aiming for</div>
            <div class="onboard-pills">
              ${[1,2,3,4,5,6].map(g => `
                <button class="onboard-pill ${s.goal === g ? 'active' : ''}" onclick="onboardSetGoal(${g})">${g}×</button>`).join('')}
            </div>
          </div>
          <button class="onboard-next-btn" onclick="onboardNext()">Continue</button>`;
      } else {
        card.innerHTML = `
          <div class="onboard-progress">${dots}</div>
          <div class="onboard-title">One last thing${s.name ? ', ' + esc(s.name) : ''}</div>
          <div class="onboard-sub">What's the one thing that keeps happening to you on the mats? Be specific — your coach will build your first game plan from this.</div>
          <div class="form-group">
            <textarea id="onboardProblem" class="log-input" rows="3" placeholder="e.g. I keep getting my guard passed when my opponent stands up...">${esc(s.problem)}</textarea>
          </div>
          <button class="onboard-next-btn" onclick="onboardFinish(true)">Build my game plan</button>
          <button class="onboard-skip" onclick="onboardFinish(false)">Skip for now</button>`;
      }
    }

    function onboardSetBelt(b) { onboardState.belt = b; onboardState.name = document.getElementById('onboardName')?.value?.trim() || onboardState.name; renderOnboard(); }
    function onboardSetYears(y) { onboardState.years = y; renderOnboard(); }
    function onboardSetGoal(g) { onboardState.goal = g; renderOnboard(); }

    function onboardNext() {
      if (onboardState.step === 1) {
        onboardState.name = document.getElementById('onboardName')?.value?.trim() || '';
      }
      onboardState.step++;
      renderOnboard();
    }

    async function onboardFinish(withPlan) {
      const s = onboardState;
      s.problem = document.getElementById('onboardProblem')?.value?.trim() || '';
      try {
        await sb.auth.updateUser({
          data: {
            display_name: s.name, belt: s.belt, years_training: s.years,
            weekly_goal: s.goal, onboarded: true
          }
        });
      } catch (e) {}
      userProfile.name = s.name;
      userProfile.belt = s.belt;
      userProfile.years = s.years;
      userProfile.weeklyGoal = s.goal;
      applyBeltBadge(s.belt);
      document.getElementById('onboardModal').classList.remove('open');
      document.body.style.overflow = '';
      renderDashboard();
      if (withPlan && s.problem) drillWithMentor(s.problem);
    }

    // Voice
    function toggleVoice() {
      voiceEnabled = !voiceEnabled;
      document.getElementById('voiceTrack').classList.toggle('on', voiceEnabled);
      document.getElementById('voiceLabel').textContent = voiceEnabled ? 'Voice on' : 'Voice off';
      if (!voiceEnabled) window.speechSynthesis.cancel();
    }

    function speak(text) {
      if (!voiceEnabled) return;
      window.speechSynthesis.cancel();
      const clean = text.replace(/<[^>]*>/g, '').replace(/\n/g, ' ').trim();
      const utterance = new SpeechSynthesisUtterance(clean);
      utterance.rate = 0.95;
      const indicator = document.getElementById('speakingIndicator');
      if (indicator) indicator.style.display = 'block';
      utterance.onend = () => { if (indicator) indicator.style.display = 'none'; };
      window.speechSynthesis.speak(utterance);
    }

    // Mic
    // Shared speech-capture helper. iOS Safari often never delivers a "final"
    // result, so we capture interim results live and commit whatever we have
    // when recognition ends. Errors are surfaced instead of silently resetting.
    function captureSpeech({ onPartial, onDone, onState }) {
      const rec = new SpeechRecognition();
      rec.continuous = false;
      rec.interimResults = true;
      rec.lang = 'en-US';
      let best = '';
      rec.onstart = () => { window.speechSynthesis?.cancel(); onState(true); };
      rec.onresult = e => {
        let text = '';
        for (const r of e.results) text += r[0].transcript;
        if (text.trim()) best = text.trim();
        if (best && onPartial) onPartial(best);
      };
      rec.onerror = e => {
        if (e.error === 'not-allowed' || e.error === 'service-not-allowed') {
          alert('Microphone access is blocked. On iPhone: Settings > Safari > Microphone, or tap the "aA" icon in the address bar > Website Settings > Microphone > Allow.');
        }
        // 'no-speech' and 'aborted' are normal — onend handles cleanup
      };
      rec.onend = () => { onState(false); onDone(best); };
      rec.start();
      return rec;
    }

    function toggleMainMic() {
      if (!SpeechRecognition) { alert('Voice input is not supported in this browser. Try Safari (iPhone) or Chrome.'); return; }
      if (isMainListening) { try { mainRecognition.stop(); } catch (e) {} return; }
      mainRecognition = captureSpeech({
        onPartial: text => { document.getElementById('problem').value = text; checkReady(); },
        onState: on => {
          isMainListening = on;
          document.getElementById('mainMic').classList.toggle('listening', on);
          document.getElementById('mainListening').classList.toggle('active', on);
        },
        onDone: text => {
          if (!text) return;
          // If the question was already submitted while the mic was open
          // (input section hidden = strategy in progress), don't re-submit
          if (document.getElementById('inputSection').style.display === 'none') return;
          document.getElementById('problem').value = text;
          checkReady();
          setTimeout(() => getStrategy(), 400);
        }
      });
    }

    function toggleChatMic() {
      if (!SpeechRecognition) { alert('Voice input is not supported in this browser. Try Safari (iPhone) or Chrome.'); return; }
      if (isChatListening) { try { chatRecognition.stop(); } catch (e) {} return; }
      chatRecognition = captureSpeech({
        onPartial: text => { document.getElementById('chatInput').value = text; },
        onState: on => {
          isChatListening = on;
          document.getElementById('chatMic').classList.toggle('listening', on);
        },
        onDone: text => {
          if (!text) return;
          // If the user already sent this dictation manually (tap/Enter while
          // the mic was still open), don't auto-send it a second time
          const lastUser = [...conversationHistory].reverse().find(m => m.role === 'user');
          if (lastUser && lastUser.content.trim() === text.trim()) return;
          document.getElementById('chatInput').value = text;
          setTimeout(() => sendChat(), 400);
        }
      });
    }

    // Navigation
    const bgMap = { dashboard: '/bg.jpeg', mentor: '/bg.jpeg', progress: '/progress-bg.jpg', calendar: '/bg.jpeg' };

    function showView(view) {
      document.querySelectorAll('.nav-item').forEach(t => t.classList.remove('active'));
      const activeNav = document.getElementById('nav-' + view);
      if (activeNav) activeNav.classList.add('active');
      document.getElementById('dashboardView').style.display  = view === 'dashboard' ? 'block' : 'none';
      document.getElementById('mentorView').style.display     = view === 'mentor'    ? 'block' : 'none';
      document.getElementById('progressView').style.display   = view === 'progress'  ? 'block' : 'none';
      document.getElementById('calendarView').style.display   = view === 'calendar'  ? 'block' : 'none';
      document.getElementById('skillsView').style.display     = view === 'skills'    ? 'block' : 'none';
      document.getElementById('nemesisView').style.display    = view === 'nemesis'   ? 'block' : 'none';
      if (view !== 'skills') {
        if (skillSimulation) { skillSimulation.stop(); skillSimulation = null; }
        closeTechniqueDetail();
        currentPosition = null;
        const floatBtn = document.getElementById('skillsBackFloat');
        if (floatBtn) floatBtn.classList.remove('visible');
      }
      const bg = document.getElementById('bgImage');
      if (bg && bgMap[view]) bg.src = bgMap[view];
      window.scrollTo(0, 0);
      if (view === 'dashboard') renderDashboard();
      if (view === 'progress') renderProgress();
      if (view === 'calendar') renderCalendar();
      if (view === 'skills') renderSkills();
      if (view === 'nemesis') renderNemesisView();
    }

    document.getElementById('problem').addEventListener('input', checkReady);

    function checkReady() {
      document.getElementById('submitBtn').disabled = document.getElementById('problem').value.trim().length <= 10;
    }

    // Agent loading animation
    let _loadingInterval = null;

    function startLoadingAnimation() {
      const el = document.getElementById('loadingText');
      if (el) el.textContent = 'building your game plan...';
    }

    function stopLoadingAnimation() {
      clearInterval(_loadingInterval);
      _loadingInterval = null;
    }

    function showToolActivity(toolsUsed) {
      if (!toolsUsed || toolsUsed.length === 0) return;
      const labels = {
        get_user_profile: 'profile',
        get_training_history: 'history',
        search_technique_library: 'techniques',
        build_drill_plan: 'drill plan',
        log_coaching_note: 'coaching note'
      };
      const el = document.getElementById('toolActivity');
      if (!el) return;
      el.innerHTML = '<span class="tool-activity-label">used</span>' +
        toolsUsed.map(t => `<span class="tool-chip">${labels[t] || t}</span>`).join('');
      el.style.display = 'flex';
      setTimeout(() => { el.style.display = 'none'; }, 5000);
    }

    // Mentor
    async function getStrategy() {
      const problem = document.getElementById('problem').value.trim();
      document.getElementById('submitBtn').disabled = true;
      document.getElementById('inputSection').style.display = 'none';
      document.getElementById('loadingState').style.display = 'block';
      startLoadingAnimation();

      conversationHistory = [{ role: 'user', content: problem }];

      currentSession = {
        id: crypto.randomUUID(),
        position: '',
        problem,
        date: new Date().toLocaleDateString(),
        drills: [],
        weaknessFlag: '',
        strengthFlag: '',
        source: 'ai'
      };

      try {
        const response = await aiFetch('/api/mentor', {
          messages: conversationHistory,
          userId: currentUser?.id,
          userContext: {
            profile: { belt: userProfile.belt, name: userProfile.name, years: userProfile.years, gym: userProfile.gym },
            recentSessions: cachedSessions.slice(0, 10)
          }
        });

        stopLoadingAnimation();
        const data = await response.json();
        const text = data.content[0].text;
        conversationHistory.push({ role: 'assistant', content: text });
        showToolActivity(data.toolsUsed);

        const start = text.indexOf('{');
        const end = text.lastIndexOf('}');
        let parsed = null;
        try { if (start !== -1 && end !== -1) parsed = JSON.parse(text.slice(start, end + 1)); } catch (_) {}

        document.getElementById('loadingState').style.display = 'none';
        document.getElementById('results').style.display = 'block';

        if (parsed && parsed.flowChains) {
          currentSession.position = parsed.position || 'Unknown';
          currentSession.weaknessFlag = parsed.weaknessFlag || '';
          currentSession.strengthFlag = parsed.strengthFlag || '';
          currentSession.drills = parsed.drills || [];
          // Persist coaching notes into the session record
          if (data.coachingNotes && data.coachingNotes.length > 0) {
            currentSession.notes = data.coachingNotes.map(n => `[${n.category}] ${n.note}`).join('\n');
          }
          renderResults(parsed);
          fetchVideos(parsed.videoSearchTerms || []);
          await saveSession();
          if (voiceEnabled && parsed.weaknessFlag) speak(`Your core weakness to address: ${parsed.weaknessFlag}`);
        } else {
          const formatted = text.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>').replace(/\n/g, '<br>');
          document.getElementById('chatMessages').innerHTML = `<div class="chat-msg assistant"><div class="bubble">${formatted}</div></div>`;
          speak(text);
        }
      } catch (err) {
        stopLoadingAnimation();
        document.getElementById('loadingState').style.display = 'none';
        document.getElementById('inputSection').style.display = 'block';
        document.getElementById('submitBtn').disabled = false;
        if (err?.isLimit) return; // paywall is already showing
        const msg = err?.message || 'Something went wrong';
        alert(msg.includes('timeout') || msg.includes('timed out')
          ? 'The coach took too long to respond — please try again.'
          : 'Something went wrong. Please try again.');
      }
    }

    function renderResults(data) {
      let html = '';
      // Weakness/strength flags are still captured behind the scenes — they
      // feed Today's Focus, drill recommendations, and the debrief — but
      // they're no longer shown as cards in the mentor results.

      html += '<div class="section-title">Your flow chains</div>';
      data.flowChains.forEach((chain, i) => {
        html += `<div class="flow-card">
          <div class="flow-chain"><div class="flow-title">${chain.title}</div><div class="flow-body">${chain.description}</div></div>
          <button class="deeper-btn" onclick="goDeeper(${i}, '${chain.title.replace(/'/g, "\\'")}')">Go Deeper ↗</button>
          <div class="deeper-response" id="deeper-${i}"></div>
        </div>`;
      });

      html += '<div class="section-title">Drills to work</div><div class="card">';
      data.drills.forEach((drill, i) => {
        html += `<div class="drill-item">
          <div class="drill-num">${i + 1}</div>
          <div class="drill-content">
            <div class="drill-text">${drill}</div>
            <div class="drill-rating" id="rating-${i}">
              ${[1,2,3,4,5].map(n => `<span class="star" onclick="rateDrill(${i}, ${n})">★</span>`).join('')}
            </div>
            <textarea class="drill-notes" id="notes-${i}" rows="2" placeholder="How did this go? Notes..."></textarea>
            <button class="save-drill-btn" onclick="saveDrill(${i}, '${drill.replace(/'/g, "\\'")}')">Save ✓<span class="saved-badge" id="saved-${i}">Saved!</span></button>
          </div>
        </div>`;
      });
      html += '</div>';

      html += '<div class="section-title">Watch & learn</div>';
      data.videoSearchTerms.forEach((term, i) => {
        html += `<div class="video-card" id="vid-${i}">
          <div class="video-thumb-shimmer" id="vid-thumb-${i}"></div>
          <div class="video-info"><div class="video-title" id="vid-title-${i}">${term}</div><div class="video-sub" id="vid-sub-${i}">Loading...</div></div>
        </div>`;
      });

      document.getElementById('resultsContent').innerHTML = html;
    }

    function rateDrill(drillIndex, rating) {
      if (!drillData[drillIndex]) drillData[drillIndex] = {};
      drillData[drillIndex].rating = rating;
      document.querySelectorAll(`#rating-${drillIndex} .star`).forEach((star, i) => star.classList.toggle('active', i < rating));
    }

    async function saveDrill(drillIndex, drillText) {
      const notes = document.getElementById(`notes-${drillIndex}`).value;
      const rating = drillData[drillIndex]?.rating || 0;
      if (!drillData[drillIndex]) drillData[drillIndex] = {};
      drillData[drillIndex] = { text: drillText, rating, notes };

      if (currentSession && currentUser) {
        const drillEntry = { text: drillText, rating, notes };
        const drills = [...(currentSession.drills || [])];
        const idx = drills.findIndex(d => (typeof d === 'string' ? d : d.text) === drillText);
        if (idx >= 0) drills[idx] = drillEntry; else drills.push(drillEntry);
        currentSession.drills = drills;
        await sb.from('sessions').update({ drills }).eq('id', currentSession.id);
      }

      const badge = document.getElementById(`saved-${drillIndex}`);
      badge.style.display = 'inline';
      setTimeout(() => badge.style.display = 'none', 2000);
    }

    async function goDeeper(chainIndex, chainTitle) {
      const responseDiv = document.getElementById(`deeper-${chainIndex}`);
      const btn = document.querySelectorAll('.deeper-btn')[chainIndex];
      btn.disabled = true;
      btn.textContent = 'Loading...';
      responseDiv.style.display = 'block';
      responseDiv.innerHTML = '<div class="loading"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>';
      conversationHistory.push({ role: 'user', content: `Go deeper on "${chainTitle}" — give me more detail on the specific mechanics, common mistakes, and how to chain it if the opponent counters.` });
      try {
        const response = await aiFetch('/api/mentor', { messages: conversationHistory });
        const data = await response.json();
        const text = data.content[0].text;
        conversationHistory.push({ role: 'assistant', content: text });
        responseDiv.innerHTML = text.replace(/\n/g, '<br>');
        speak(text);
      } catch (_) { responseDiv.innerHTML = 'Something went wrong. Try again.'; }
      btn.textContent = 'Go Deeper ↗';
      btn.disabled = false;
    }

    async function sendChat() {
      const input = document.getElementById('chatInput');
      const message = input.value.trim();
      if (!message) return;
      const chatMessages = document.getElementById('chatMessages');
      const sendBtn = document.getElementById('chatSend');
      if (sendBtn.disabled) return; // a send is already in flight — no double-fire
      chatMessages.innerHTML += `<div class="chat-msg user"><div class="bubble">${esc(message)}</div></div>`;
      input.value = '';
      sendBtn.disabled = true;
      conversationHistory.push({ role: 'user', content: message });
      // Unique id per message — a shared id made replies overwrite the FIRST
      // bubble on the page instead of this one
      const msgId = 'chatmsg-' + Date.now();
      chatMessages.innerHTML += `<div class="chat-msg assistant" id="${msgId}"><div class="bubble"><div class="loading"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div></div></div>`;
      chatMessages.scrollTop = chatMessages.scrollHeight;
      try {
        const response = await aiFetch('/api/mentor', {
          messages: conversationHistory,
          userId: currentUser?.id,
          userContext: { profile: { belt: userProfile.belt, name: userProfile.name, years: userProfile.years, gym: userProfile.gym }, recentSessions: cachedSessions.slice(0, 10) }
        });
        const data = await response.json();
        let text = data.content[0].text;
        // Safety net: if the model answered a follow-up with a fresh strategy
        // JSON (raw or inside a ```json fence), convert it to readable text
        if (text.includes('"flowChains"')) {
          try {
            const j = JSON.parse(text.slice(text.indexOf('{'), text.lastIndexOf('}') + 1));
            if (j.flowChains) {
              text = (j.flowChains || []).map(c => `${c.title}: ${c.description}`).join('\n\n')
                + (j.weaknessFlag ? `\n\nFocus area: ${j.weaknessFlag}` : '');
            }
          } catch (_) {}
        }
        conversationHistory.push({ role: 'assistant', content: text });
        document.getElementById(msgId).innerHTML = `<div class="bubble">${esc(text).replace(/\n/g, '<br>')}</div>`;
        chatMessages.scrollTop = chatMessages.scrollHeight;
        speak(text);
      } catch (_) {
        const el = document.getElementById(msgId);
        if (el) el.innerHTML = `<div class="bubble" style="color:#e24b4a;">Something went wrong. Try again.</div>`;
      }
      sendBtn.disabled = false;
    }

    // Video
    function fetchVideos(terms) {
      if (!terms || terms.length === 0) return;
      // Shared across the cards so two search terms that rank the same video
      // #1 don't both show it — later cards take their next-best candidate
      const usedIds = new Set();
      terms.forEach((term, i) => {
        // 8-second timeout fallback — shimmer never gets stuck
        const fallbackTimer = setTimeout(() => updateVideoCard(i, term, null, usedIds), 8000);
        fetch(api(`/api/youtube?term=${encodeURIComponent(term)}`))
          .then(r => r.json())
          .then(data => { clearTimeout(fallbackTimer); updateVideoCard(i, term, data, usedIds); })
          .catch(() => { clearTimeout(fallbackTimer); updateVideoCard(i, term, null, usedIds); });
      });
    }

    function updateVideoCard(i, term, data, usedIds) {
      const card = document.getElementById(`vid-${i}`);
      const thumb = document.getElementById(`vid-thumb-${i}`);
      if (!card || !thumb) return;
      // Pick the best-ranked candidate not already shown on another card
      let pick = null;
      if (data && (data.candidates?.length || data.videoId)) {
        const candidates = data.candidates?.length ? data.candidates : [data];
        pick = candidates.find(c => c.videoId && !usedIds?.has(c.videoId)) || null;
        if (pick && usedIds) usedIds.add(pick.videoId);
      }
      if (pick) {
        const data2 = pick;
        thumb.outerHTML = `<img src="${data2.thumbnail}" class="video-thumb-img" alt="">`;
        document.getElementById(`vid-title-${i}`).textContent = data2.title;
        document.getElementById(`vid-sub-${i}`).innerHTML =
          esc(data2.channelTitle) + (data2.trusted ? '<span class="verified-badge">✓ Verified Instructor</span>' : '');
        card.onclick = () => playVideo(data2.videoId);
      } else {
        thumb.outerHTML = `<div class="video-thumb"><svg width="16" height="16" viewBox="0 0 24 24" fill="white"><path d="M8 5v14l11-7z"/></svg></div>`;
        document.getElementById(`vid-sub-${i}`).textContent = 'Search on YouTube';
        card.onclick = () => openExternal('https://www.youtube.com/results?search_query=' + encodeURIComponent(term));
      }
    }

    function playVideo(videoId) {
      // YouTube embeds reject the native shell's origin (player error 153),
      // so open videos in the in-app browser sheet on native instead
      if (IS_NATIVE) {
        openExternal(`https://www.youtube.com/watch?v=${videoId}`);
        return;
      }
      document.getElementById('videoIframe').src = `https://www.youtube.com/embed/${videoId}?autoplay=1&rel=0`;
      document.getElementById('videoModal').style.display = 'flex';
      document.body.style.overflow = 'hidden';
    }

    function closeVideo() {
      document.getElementById('videoIframe').src = '';
      document.getElementById('videoModal').style.display = 'none';
      document.body.style.overflow = '';
    }

    document.addEventListener('keydown', e => {
      if (e.key === 'Escape') closeVideo();
      if (e.key === 'Enter' && (e.target.id === 'authEmail' || e.target.id === 'authPassword')) handleAuth();
    });

    // Session storage (Supabase)
    async function saveSession() {
      if (!currentSession || !currentUser) return;
      await sb.from('sessions').upsert({
        id: currentSession.id,
        user_id: currentUser.id,
        position: currentSession.position,
        problem: currentSession.problem,
        notes: currentSession.notes || '',
        date: currentSession.date,
        drills: currentSession.drills || [],
        weakness_flag: currentSession.weaknessFlag || '',
        strength_flag: currentSession.strengthFlag || '',
        rolling_rounds: currentSession.rollingRounds || {},
        source: currentSession.source || 'ai'
      });
    }

    async function resetApp() {
      await saveSession();
      closeVideo();
      window.speechSynthesis.cancel();
      document.getElementById('results').style.display = 'none';
      document.getElementById('inputSection').style.display = 'block';
      document.getElementById('resultsContent').innerHTML = '';
      document.getElementById('chatMessages').innerHTML = '';
      document.getElementById('problem').value = '';
      conversationHistory = [];
      currentSession = null;
      drillData = {};
      document.getElementById('submitBtn').disabled = true;
    }

    // Progress
    async function renderProgress() {
      const view = document.getElementById('progressView');
      const header = `<div class="progress-header">
        <div class="section-title" style="margin:0;">Training Log</div>
        <button class="log-btn" onclick="showLogModal()">+ Log Session</button>
      </div>`;

      // Use cached sessions immediately if available, fetch fresh in background
      if (cachedSessions.length > 0) {
        renderProgressFromData(view, header, cachedSessions);
        // Refresh in background silently
        sb.from('sessions').select('*').order('created_at', { ascending: false }).limit(200)
          .then(({ data }) => { if (data && data.length > 0) { cachedSessions = data.map(s => ({ ...s, weaknessFlag: s.weakness_flag, strengthFlag: s.strength_flag, rollingRounds: s.rolling_rounds })); renderProgressFromData(view, header, cachedSessions); } })
          .catch(() => {});
        return;
      }

      view.innerHTML = header + '<div class="loading"><div class="dot"></div><div class="dot"></div><div class="dot"></div><span>loading...</span></div>';

      let rows;
      try {
        const timeout = new Promise((_, reject) => setTimeout(() => reject(new Error('timeout')), 15000));
        const query = sb.from('sessions').select('*').order('created_at', { ascending: false }).limit(200);
        const { data, error } = await Promise.race([query, timeout]);
        if (error) throw error;
        rows = data;
      } catch (err) {
        // Auth lock conflict — another tab or request stole the token. Retry automatically.
        if (err.message && (err.message.includes('stole it') || err.message.includes('lock'))) {
          view.innerHTML = header + '<div class="loading"><div class="dot"></div><div class="dot"></div><div class="dot"></div><span>reconnecting...</span></div>';
          setTimeout(() => renderProgress(), 2000);
          return;
        }
        view.innerHTML = header + `<div class="empty-state" style="color:#e63b30;">Couldn't load sessions — ${err.message === 'timeout' ? 'request timed out. Check your connection and try again' : err.message}.<br><br><button class="log-btn" onclick="renderProgress()">Retry</button></div>`;
        return;
      }

      if (!rows || rows.length === 0) {
        view.innerHTML = header + '<div class="empty-state">No sessions yet.<br>Complete your first AI session or tap Log Session to start tracking.</div>';
        return;
      }

      cachedSessions = rows.map(s => ({ ...s, weaknessFlag: s.weakness_flag, rollingRounds: s.rolling_rounds }));
      renderProgressFromData(view, header, cachedSessions);
    }

    function renderProgressFromData(view, header, sessions) {
      const totalDrills = sessions.reduce((a, s) => a + (s.drills?.filter(d => d.rating > 0).length || 0), 0);
      const posCounts = {};
      sessions.forEach(s => { if (s.position) posCounts[s.position] = (posCounts[s.position] || 0) + 1; });
      const topPos = Object.entries(posCounts).sort((a, b) => b[1] - a[1])[0];
      const streak = calculateStreak(sessions);

      // Count weakness occurrences (not just unique strings)
      const weaknessCounts = {};
      sessions.forEach(s => {
        if (s.weaknessFlag) weaknessCounts[s.weaknessFlag] = (weaknessCounts[s.weaknessFlag] || 0) + 1;
      });
      const topWeaknesses = Object.entries(weaknessCounts).sort((a, b) => b[1] - a[1]).slice(0, 6);

      // Nemesis stats
      const allNemRolls = Object.values(nemesisRolls).flat();
      const nemW = allNemRolls.filter(r => r.result === 'win').length;
      const nemL = allNemRolls.filter(r => r.result === 'loss').length;
      const nemD = allNemRolls.filter(r => r.result === 'draw').length;

      let html = header;

      // Stats
      html += '<div class="stat-grid">';
      html += `<div class="stat-card"><div class="stat-label">Sessions</div><div class="stat-value">${sessions.length}</div></div>`;
      html += `<div class="stat-card"><div class="stat-label">Drills Logged</div><div class="stat-value">${totalDrills}</div></div>`;
      html += `<div class="stat-card"><div class="stat-label">Streak</div><div class="stat-value">${streak}</div><div class="stat-sub">days</div></div>`;
      html += `<div class="stat-card"><div class="stat-label">Top Position</div><div class="stat-value" style="font-size:16px;">${topPos ? topPos[0] : '—'}</div></div>`;
      if (nemesisList.length > 0) {
        html += `<div class="stat-card"><div class="stat-label">Nemesis W/L/D</div><div class="stat-value" style="font-size:15px;"><span style="color:#4ade80;">${nemW}</span>/<span style="color:#e63b30;">${nemL}</span>/<span style="color:#888;">${nemD}</span></div></div>`;
        html += `<div class="stat-card"><div class="stat-label">Nemesis</div><div class="stat-value">${nemesisList.length}</div><div class="stat-sub">tracked</div></div>`;
      }
      html += '</div>';

      // Areas to address — collapsible
      if (topWeaknesses.length > 0) {
        html += `<div class="collapsible-section">
          <div class="collapsible-header" onclick="toggleSection('weaknesses')">
            <span class="section-title">Areas to address</span>
            <span class="collapsible-pill">${topWeaknesses.length}</span>
            <span class="collapsible-chev open" id="chev-weaknesses">›</span>
          </div>
          <div class="collapsible-body open" id="body-weaknesses">`;
        topWeaknesses.forEach(([w, count]) => {
          html += `<div class="weak-item">
            <span class="weak-text">⚠ ${w}</span>
            ${count > 1 ? `<span class="weak-count">${count}×</span>` : ''}
          </div>`;
        });
        html += `</div></div>`;
      }

      // Positions trained — collapsible
      const posEntries = Object.entries(posCounts).sort((a, b) => b[1] - a[1]);
      if (posEntries.length > 0) {
        const maxCount = Math.max(...Object.values(posCounts));
        html += `<div class="collapsible-section">
          <div class="collapsible-header" onclick="toggleSection('positions')">
            <span class="section-title">Positions trained</span>
            <span class="collapsible-pill">${posEntries.length}</span>
            <span class="collapsible-chev open" id="chev-positions">›</span>
          </div>
          <div class="collapsible-body open" id="body-positions"><div class="card" style="margin-bottom:0;">`;
        posEntries.forEach(([pos, count]) => {
          html += `<div class="pos-bar-item">
            <div class="pos-bar-label" title="${pos}">${pos}</div>
            <div class="pos-bar-track"><div class="pos-bar-fill" style="width:${Math.round((count/maxCount)*100)}%"></div></div>
            <div class="pos-bar-count">${count}</div>
          </div>`;
        });
        html += `</div></div></div>`;
      }

      // Nemesis breakdown — collapsible
      if (nemesisList.length > 0) {
        html += `<div class="collapsible-section">
          <div class="collapsible-header" onclick="toggleSection('nemesisBreakdown')">
            <span class="section-title">Nemesis breakdown</span>
            <span class="collapsible-pill">${nemesisList.length}</span>
            <span class="collapsible-chev open" id="chev-nemesisBreakdown">›</span>
          </div>
          <div class="collapsible-body open" id="body-nemesisBreakdown"><div class="card" style="margin-bottom:0;">`;
        nemesisList.forEach(n => {
          const rolls = nemesisRolls[n.id] || [];
          const nW = rolls.filter(r => r.result === 'win').length;
          const nL = rolls.filter(r => r.result === 'loss').length;
          const nD = rolls.filter(r => r.result === 'draw').length;
          const total = rolls.length;
          const lastRoll = rolls.slice().sort((a, b) => new Date(b.date) - new Date(a.date))[0];
          const lastDate = lastRoll ? new Date(lastRoll.date + 'T00:00:00').toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) : null;
          html += `<div class="pos-bar-item" style="cursor:pointer;" onclick="openNemesis('${n.id}')">
            <div class="pos-bar-label" style="flex:1;max-width:none;" title="${n.name}">${n.name}</div>
            <div style="display:flex;gap:6px;align-items:center;font-size:13px;margin-left:auto;">
              <span style="color:#4ade80;">${nW}W</span>
              <span style="color:#e63b30;">${nL}L</span>
              <span style="color:#888;">${nD}D</span>
              ${lastDate ? `<span style="color:#555;font-size:11px;margin-left:4px;">${lastDate}</span>` : ''}
              ${total === 0 ? `<span style="color:#444;font-size:11px;">no rolls</span>` : ''}
            </div>
            <span style="color:#444;font-size:16px;margin-left:8px;">›</span>
          </div>`;
        });
        html += `</div></div></div>`;
      }

      // Session history — filter + paginated
      const positions = [...new Set(sessions.map(s => s.position).filter(Boolean))].sort();
      html += `<div style="display:flex;align-items:center;justify-content:space-between;margin-top:1.5rem;margin-bottom:0.5rem;">
        <span class="section-title" style="margin:0;">Session history</span>
      </div>
      <div class="session-filter-row">
        <select id="posFilter" class="session-filter-select" onchange="filterSessions()">
          <option value="">All positions</option>
          ${positions.map(p => `<option value="${p}">${p}</option>`).join('')}
        </select>
        <span class="session-count-label" id="sessionCountLabel">${sessions.length} session${sessions.length !== 1 ? 's' : ''}</span>
      </div>
      <div id="sessionList"></div>
      <div id="loadMoreWrap" style="text-align:center;margin-top:0.75rem;margin-bottom:1rem;"></div>`;

      // Belt history section
      html += `<div class="collapsible-section" id="beltHistorySection">
        <div class="collapsible-header" onclick="toggleSection('beltHistory')">
          <span class="section-title">Belt History</span>
          <span class="collapsible-pill" id="beltHistoryPill">${beltHistory.length}</span>
          <span class="collapsible-chev" id="chev-beltHistory">›</span>
        </div>
        <div class="collapsible-body" id="body-beltHistory">
          <div id="beltHistoryList"></div>
          <button class="log-btn" style="margin-top:0.75rem;background:rgba(255,255,255,0.05);color:#888;border:0.5px solid rgba(255,255,255,0.1);" onclick="showAddBeltEntry()">+ Add promotion</button>
          <div id="addBeltEntryForm" style="display:none;" class="bh-add-form">
            <div class="form-group">
              <label class="form-label">Belt</label>
              <select id="bh-belt" class="log-input" style="appearance:none;-webkit-appearance:none;">
                <option value="white">White</option>
                <option value="blue">Blue</option>
                <option value="purple">Purple</option>
                <option value="brown">Brown</option>
                <option value="black">Black</option>
              </select>
            </div>
            <div class="form-group">
              <label class="form-label">Stripes (0–4)</label>
              <input type="number" id="bh-stripes" class="log-input" value="0" min="0" max="4" style="width:80px;">
            </div>
            <div class="form-group">
              <label class="form-label">Date awarded</label>
              <input type="date" id="bh-date" class="log-input">
            </div>
            <div class="form-group">
              <label class="form-label">Notes (optional)</label>
              <input type="text" id="bh-notes" class="log-input" placeholder="e.g. After IBJJF tournament">
            </div>
            <button class="submit-btn" onclick="submitBeltEntry()">Save promotion</button>
          </div>
        </div>
      </div>`;

      view.innerHTML = html;

      // Render belt history list
      renderBeltHistoryList();

      // Initialise filter/pagination state and render first page
      window._progressSessions = sessions;
      window._progressPage = 1;
      filterSessions();
    }

    function renderBeltHistoryList() {
      const el = document.getElementById('beltHistoryList');
      if (!el) return;
      if (beltHistory.length === 0) {
        el.innerHTML = '<div style="font-size:13px;color:#555;padding:0.5rem 0;">No belt promotions recorded yet.</div>';
        return;
      }
      const BELT_COLORS_HEX = { white: '#f0f0f0', blue: '#4a90e2', purple: '#7b4fa6', brown: '#8B4513', black: '#555' };
      let html = '<div class="belt-history-timeline">';
      beltHistory.forEach(entry => {
        const color = BELT_COLORS_HEX[entry.belt] || '#f0f0f0';
        const stripesDots = [0,1,2,3].map(i => `<div class="bh-stripe${i < (entry.stripes || 0) ? ' filled' : ''}"></div>`).join('');
        const date = entry.date_awarded ? new Date(entry.date_awarded + 'T00:00:00').toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' }) : 'Unknown date';
        html += `<div class="bh-entry">
          <div class="bh-dot" style="background:${color};border-color:${color};"></div>
          <div class="bh-date">${date}</div>
          <div class="bh-belt" style="color:${color};">${entry.belt.charAt(0).toUpperCase() + entry.belt.slice(1)} Belt</div>
          <div class="bh-stripes">${stripesDots}</div>
          ${entry.notes ? `<div class="bh-notes">${entry.notes}</div>` : ''}
        </div>`;
      });
      html += '</div>';
      el.innerHTML = html;
    }

    function showAddBeltEntry() {
      const form = document.getElementById('addBeltEntryForm');
      if (form) form.style.display = form.style.display === 'none' ? 'block' : 'none';
    }

    async function submitBeltEntry() {
      const belt = document.getElementById('bh-belt').value;
      const stripes = document.getElementById('bh-stripes').value;
      const dateAwarded = document.getElementById('bh-date').value;
      const notes = document.getElementById('bh-notes').value.trim();
      const { error } = await addBeltEntry(belt, stripes, dateAwarded, notes);
      if (error) { alert('Could not save: ' + error.message); return; }
      document.getElementById('addBeltEntryForm').style.display = 'none';
      const pill = document.getElementById('beltHistoryPill');
      if (pill) pill.textContent = beltHistory.length;
      renderBeltHistoryList();
    }

    function toggleSection(id) {
      const body = document.getElementById('body-' + id);
      const chev = document.getElementById('chev-' + id);
      if (!body) return;
      const isOpen = body.classList.toggle('open');
      if (chev) chev.classList.toggle('open', isOpen);
    }

    function filterSessions() {
      const filter = document.getElementById('posFilter')?.value || '';
      const sessions = window._progressSessions || [];
      const filtered = filter ? sessions.filter(s => (s.position || '') === filter) : sessions;
      window._filteredSessions = filtered;
      window._progressPage = 1;
      const label = document.getElementById('sessionCountLabel');
      if (label) label.textContent = `${filtered.length} session${filtered.length !== 1 ? 's' : ''}`;
      renderSessionPage();
    }

    function renderSessionPage() {
      const PAGE_SIZE = 10;
      const sessions = window._filteredSessions || [];
      const page = window._progressPage || 1;
      const showing = sessions.slice(0, page * PAGE_SIZE);
      const remaining = sessions.length - showing.length;

      const listEl = document.getElementById('sessionList');
      const moreEl = document.getElementById('loadMoreWrap');
      if (!listEl) return;

      let html = '';
      if (showing.length === 0) {
        html = '<div class="empty-state">No sessions found.</div>';
      } else {
        showing.forEach(s => {
          const drillCount = s.drills?.filter(d => d.rating > 0).length || 0;
          const hasRolling = s.rollingRounds?.minutes > 0;
          const sourceTag = s.source === 'manual' ? '<span class="source-tag">Manual</span>' : '<span class="source-tag ai-tag">AI</span>';
          const meta = [drillCount > 0 ? `${drillCount} drill${drillCount !== 1 ? 's' : ''}` : '', hasRolling ? `${s.rollingRounds.minutes}min rolling` : ''].filter(Boolean).join(' · ');
          html += `<div class="session-item clickable" onclick="renderSessionDetail('${s.id}')">
            <div class="session-header">
              <div style="display:flex;align-items:center;gap:8px;"><div class="session-pos">${s.position || 'General'}</div>${sourceTag}</div>
              <div style="display:flex;align-items:center;gap:8px;"><div class="session-date">${s.date}</div><div class="session-chevron">›</div></div>
            </div>
            <div class="session-problem">${esc((s.problem || s.notes || '').slice(0, 120))}</div>
            ${meta ? `<div class="session-meta">${meta}</div>` : ''}
          </div>`;
        });
      }
      listEl.innerHTML = html;

      if (moreEl) {
        moreEl.innerHTML = remaining > 0
          ? `<button class="log-btn" style="background:rgba(255,255,255,0.05);color:#888;border:0.5px solid rgba(255,255,255,0.1);" onclick="loadMoreSessions()">Load ${Math.min(remaining, PAGE_SIZE)} more</button>`
          : '';
      }
    }

    function loadMoreSessions() {
      window._progressPage = (window._progressPage || 1) + 1;
      renderSessionPage();
    }

    function renderSessionDetail(sessionId) {
      const s = cachedSessions.find(s => String(s.id) === String(sessionId));
      if (!s) return;
      const rr = s.rollingRounds || {};
      const view = document.getElementById('progressView');

      let html = `<div class="detail-header">
        <button class="back-btn" onclick="renderProgress()">← Back</button>
        <button class="delete-btn" onclick="deleteSession('${s.id}')">Delete</button>
      </div>
      <div class="detail-top"><div class="detail-pos">${s.position || 'General'}</div><div class="detail-date">${s.date}</div></div>`;

      if (s.problem || s.notes) {
        html += `<div class="card" style="margin-bottom:1rem;"><div class="card-label">Problem / Notes</div><div style="font-size:14px;color:#aaa;line-height:1.6;">${esc(s.problem || s.notes)}</div></div>`;
      }
      if (s.weaknessFlag) {
        html += `<div class="weakness-flag"><div class="weakness-label">Core weakness identified</div>${s.weaknessFlag}</div>`;
      }
      if (s.strengthFlag || s.strength_flag) {
        html += `<div class="strength-flag"><div class="strength-label">Strength identified</div>${s.strengthFlag || s.strength_flag}</div>`;
      }
      if (s.drills && s.drills.length > 0) {
        html += '<div class="section-title">Drills</div><div class="card">';
        s.drills.forEach((drill, i) => {
          const text = typeof drill === 'string' ? drill : drill.text;
          const rating = typeof drill === 'object' ? (drill.rating || 0) : 0;
          const notes = typeof drill === 'object' ? (drill.notes || '') : '';
          html += `<div class="drill-item"><div class="drill-num">${i + 1}</div><div class="drill-content">
            <div class="drill-text">${text}</div>
            ${rating > 0 ? `<div style="color:#e63b30;font-size:14px;margin-top:4px;">${'★'.repeat(rating)}${'☆'.repeat(5-rating)}</div>` : ''}
            ${notes ? `<div style="font-size:12px;color:#666;margin-top:4px;">${notes}</div>` : ''}
          </div></div>`;
        });
        html += '</div>';
      }

      html += `<div class="section-title">Rolling rounds</div><div class="card">
        <div class="round-grid">
          <div><div class="round-num" id="rr-wins">${rr.wins||0}</div><div class="round-label">Submissions</div></div>
          <div><div class="round-num" id="rr-losses">${rr.losses||0}</div><div class="round-label">Tapped out</div></div>
          <div><div class="round-num" id="rr-minutes">${rr.minutes||0}</div><div class="round-label">Minutes</div></div>
        </div>
        <div class="round-inputs">
          <div class="round-input-group"><label>Submissions</label><input type="number" id="inp-wins" value="${rr.wins||0}" min="0" class="round-input"></div>
          <div class="round-input-group"><label>Tapped out</label><input type="number" id="inp-losses" value="${rr.losses||0}" min="0" class="round-input"></div>
          <div class="round-input-group"><label>Minutes</label><input type="number" id="inp-minutes" value="${rr.minutes||0}" min="0" class="round-input"></div>
        </div>
        <button class="save-drill-btn" style="width:100%;" onclick="saveRollingRounds('${s.id}')">Save rounds<span class="saved-badge" id="rr-saved">Saved!</span></button>
      </div>`;

      view.innerHTML = html;
    }

    async function saveRollingRounds(sessionId) {
      const rr = {
        wins: parseInt(document.getElementById('inp-wins').value) || 0,
        losses: parseInt(document.getElementById('inp-losses').value) || 0,
        minutes: parseInt(document.getElementById('inp-minutes').value) || 0
      };
      await sb.from('sessions').update({ rolling_rounds: rr }).eq('id', sessionId);
      const s = cachedSessions.find(s => String(s.id) === String(sessionId));
      if (s) s.rollingRounds = rr;
      document.getElementById('rr-wins').textContent = rr.wins;
      document.getElementById('rr-losses').textContent = rr.losses;
      document.getElementById('rr-minutes').textContent = rr.minutes;
      const badge = document.getElementById('rr-saved');
      badge.style.display = 'inline';
      setTimeout(() => badge.style.display = 'none', 1500);
    }

    async function deleteSession(sessionId) {
      if (!confirm('Delete this session?')) return;
      await sb.from('sessions').delete().eq('id', sessionId);
      renderProgress();
    }

    // ── Calendar ──────────────────────────────────────────────────────────

    const TYPE_LABELS = { seminar: 'Seminar', competition: 'Competition', local: 'Local Event', televised: 'Televised' };
    const ALL_TYPES   = ['seminar', 'competition', 'local', 'televised'];

    let calState = (() => {
      try {
        const s = JSON.parse(localStorage.getItem('calState') || '{}');
        return {
          location: s.location || '',
          radius:   s.radius   || '50',
          types:    s.types    || [...ALL_TYPES],
          events:   [],
          loading:  false,
          activeEvent: null
        };
      } catch { return { location: '', radius: '50', types: [...ALL_TYPES], events: [], loading: false, activeEvent: null }; }
    })();

    function saveCalState() {
      localStorage.setItem('calState', JSON.stringify({ location: calState.location, radius: calState.radius, types: calState.types }));
    }

    function renderCalendar() {
      const view = document.getElementById('calendarView');
      if (calState.activeEvent) { renderCalendarDetail(calState.activeEvent); return; }
      if (!calState.location) { renderCalendarSetup(); return; }
      if (calState.loading) {
        view.innerHTML = `<div class="cal-topbar">
          <div class="cal-loc-chip">${locationChipSVG()}${calState.location}</div>
        </div>
        <div class="loading" style="padding:3rem 0;"><div class="dot"></div><div class="dot"></div><div class="dot"></div><span>finding events near you...</span></div>`;
        return;
      }
      renderCalendarContent();
    }

    function locationChipSVG() {
      return `<svg viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>`;
    }

    function renderCalendarSetup() {
      const view = document.getElementById('calendarView');
      view.innerHTML = `
        <div class="cal-setup">
          <div class="cal-setup-icon"><svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#e63b30" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21s-7-5.5-7-11a7 7 0 0 1 14 0c0 5.5-7 11-7 11z"/><circle cx="12" cy="10" r="2.6"/></svg></div>
          <div class="cal-setup-title">Find events near you</div>
          <div class="cal-setup-sub">Seminars, competitions, local martial arts events and televised fight cards — all in one place.</div>
          <button class="cal-setup-btn primary" onclick="useMyLocation()">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="white"><path d="M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm8.94 3c-.46-4.17-3.77-7.48-7.94-7.94V1h-2v2.06C6.83 3.52 3.52 6.83 3.06 11H1v2h2.06c.46 4.17 3.77 7.48 7.94 7.94V23h2v-2.06c4.17-.46 7.48-3.77 7.94-7.94H23v-2h-2.06z"/></svg>
            Use my location
          </button>
          <div class="cal-divider">or enter manually</div>
          <div class="cal-manual-row">
            <input id="calLocInput" class="cal-loc-input" type="text" placeholder="City, state or zip code…" onkeydown="if(event.key==='Enter')setCalLocation()">
            <button class="cal-go-btn" onclick="setCalLocation()">Go</button>
          </div>
        </div>`;
    }

    // Parse event date — returns { date, hasYear } or null
    const _MONTH_IDX = { jan:0, feb:1, mar:2, apr:3, may:4, jun:5, jul:6, aug:7, sep:8, oct:9, nov:10, dec:11 };

    function parseEventDate(dateStr) {
      if (!dateStr || dateStr === 'See details') return null;
      const s = String(dateStr);

      // Never trust new Date() with these strings — it mangles year-less and
      // range formats ("Jun 9" → 2002, "Jul 4-6, 2026" → 2006). Extract the
      // month name, day, and optional year explicitly instead.
      const yearMatch = s.match(/\b(20\d{2})\b/);
      const hasYear = !!yearMatch;

      let d = null;
      const md = s.match(/\b(jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)[a-z]*\.?\s+(\d{1,2})\b/i);
      if (md) {
        const month = _MONTH_IDX[md[1].slice(0, 3).toLowerCase()];
        const day = parseInt(md[2]);
        if (day < 1 || day > 31) return null;
        const year = hasYear ? parseInt(yearMatch[1]) : new Date().getFullYear();
        d = new Date(year, month, day);
      } else if (hasYear) {
        // Numeric formats like "6/14/2026" — safe to raw-parse only with explicit year
        const t = new Date(s);
        if (!isNaN(t.getTime())) d = t;
      }
      if (!d || isNaN(d.getTime())) return null;

      // Year-less dates are ambiguous: "Jun 9" two days later is a past event,
      // but "Jan 3" seen in June means NEXT January. If more than 45 days in
      // the past, assume next year.
      if (!hasYear) {
        const cutoff = new Date();
        cutoff.setHours(0, 0, 0, 0);
        cutoff.setDate(cutoff.getDate() - 45);
        if (d < cutoff) d.setFullYear(d.getFullYear() + 1);
      }

      return { date: d, hasYear };
    }

    function renderCalendarContent() {
      const view = document.getElementById('calendarView');
      const today = new Date();
      today.setHours(0, 0, 0, 0);

      // Filter by type AND exclude past events. parseEventDate rolls ambiguous
      // year-less dates (e.g. "Jan 3" seen in June) into next year, so any
      // parsed date still in the past is genuinely over — drop it.
      const filtered = calState.events.filter(e => {
        if (!calState.types.includes(e.type)) return false;
        const parsed = parseEventDate(e.date);
        if (parsed && parsed.date < today) return false;
        return true;
      });

      // Sort: confirmed dates ascending, unconfirmed/undated at the end
      filtered.sort((a, b) => {
        const da = parseEventDate(a.date);
        const db = parseEventDate(b.date);
        if (da && db) return da.date - db.date;
        if (da) return -1;
        if (db) return 1;
        return 0;
      });

      const radiusOptions = ['10','25','50','100','any'];

      let html = `
        <div class="cal-topbar">
          <div class="cal-loc-chip" onclick="changeCalLocation()">
            ${locationChipSVG()} ${calState.location}
          </div>
          <button class="cal-refresh-btn" onclick="refreshCalEvents()">↻ Refresh</button>
        </div>
        <div class="cal-filters">
          <select class="cal-radius" onchange="setCalRadius(this.value)">
            ${radiusOptions.map(r => `<option value="${r}" ${calState.radius===r?'selected':''}>${r==='any'?'Any distance':r+' mi'}</option>`).join('')}
          </select>
          ${ALL_TYPES.map(t => {
            const on = calState.types.includes(t);
            return `<button class="type-pill ${on?'on-'+t:''}" onclick="toggleCalType('${t}')">${TYPE_LABELS[t]}</button>`;
          }).join('')}
        </div>`;

      if (filtered.length === 0) {
        html += `<div class="empty-state">No upcoming events found for the selected filters.<br><br>
          <button class="log-btn" onclick="refreshCalEvents()">Search again</button></div>`;
      } else {
        filtered.forEach(evt => {
          html += `<div class="event-card" onclick="openCalendarEvent('${evt.id}')">
            <div class="event-card-top">
              <div class="event-title">${evt.title}</div>
              <span class="event-badge badge-${evt.type}">${TYPE_LABELS[evt.type]}</span>
            </div>
            ${evt.date ? `<div class="event-date">${evt.date}</div>` : ''}
            ${evt.location ? `<div class="event-location-line">${evt.location}</div>` : ''}
            ${evt.description ? `<div class="event-snippet">${evt.description}</div>` : ''}
          </div>`;
        });
      }

      view.innerHTML = html;
    }

    function renderCalendarDetail(evt) {
      const view = document.getElementById('calendarView');
      view.innerHTML = `
        <div class="event-detail-bar">
          <button class="back-btn" onclick="closeCalendarEvent()">← Back</button>
          <span class="event-detail-badge badge-${evt.type}">${TYPE_LABELS[evt.type]}</span>
        </div>
        ${evt.thumbnail ? `<img src="${evt.thumbnail}" style="width:100%;border-radius:12px;object-fit:cover;max-height:180px;margin-bottom:1.25rem;">` : ''}
        <div class="event-detail-date">${evt.date || ''}</div>
        <div class="event-detail-title">${evt.title}</div>
        ${evt.venue ? `<div class="event-detail-venue">🏟 ${evt.venue}</div>` : ''}
        ${evt.location ? `<div class="event-detail-loc">${evt.location}</div>` : ''}
        ${evt.description ? `<div class="card" style="margin-top:1rem;"><div class="card-label">About this event</div><div class="event-detail-desc">${evt.description}</div></div>` : ''}
        ${evt.link
          ? `<button class="event-reg-btn" onclick="openExternal('${evt.link}')">View details & sign up ↗</button>`
          : `<div class="event-no-link">No direct link available — search online for registration details.</div>`
        }`;
    }

    function openCalendarEvent(id) {
      const evt = calState.events.find(e => e.id === id);
      if (!evt) return;
      calState.activeEvent = evt;
      renderCalendarDetail(evt);
    }

    function closeCalendarEvent() {
      calState.activeEvent = null;
      renderCalendarContent();
    }

    async function useMyLocation() {
      if (!navigator.geolocation) {
        alert('Geolocation is not supported by your browser. Please enter your location manually.');
        return;
      }
      const btn = document.querySelector('.cal-setup-btn.primary');
      if (btn) { btn.disabled = true; btn.textContent = 'Detecting…'; }

      navigator.geolocation.getCurrentPosition(async pos => {
        try {
          const { latitude: lat, longitude: lon } = pos.coords;
          const r = await fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lon}`, {
            headers: { 'Accept-Language': 'en' }
          });
          const d = await r.json();
          const city = d.address?.city || d.address?.town || d.address?.village || d.address?.county || '';
          const state = d.address?.state_code || d.address?.state || '';
          const loc = [city, state].filter(Boolean).join(', ') || d.display_name?.split(',')[0] || 'my location';
          await applyCalLocation(loc);
        } catch {
          if (btn) { btn.disabled = false; btn.innerHTML = 'Use my location'; }
          alert('Could not detect your city. Please enter it manually.');
        }
      }, () => {
        if (btn) { btn.disabled = false; btn.innerHTML = 'Use my location'; }
        alert('Location access denied. Please enter your location manually.');
      });
    }

    async function setCalLocation() {
      const input = document.getElementById('calLocInput');
      const loc = input?.value?.trim();
      if (!loc) return;
      await applyCalLocation(loc);
    }

    async function applyCalLocation(loc) {
      calState.location = loc;
      calState.events = [];
      calState.activeEvent = null;
      saveCalState();
      await fetchCalendarEvents();
    }

    function changeCalLocation() {
      calState.location = '';
      calState.events = [];
      calState.activeEvent = null;
      saveCalState();
      renderCalendarSetup();
    }

    async function refreshCalEvents() {
      calState.events = [];
      await fetchCalendarEvents();
    }

    async function fetchCalendarEventsSilent() {
      if (!calState.location) return;
      try {
        const res = await fetch(api('/api/events'), {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ location: calState.location, radius: calState.radius, types: calState.types })
        });
        const data = await res.json();
        if (!data.error) {
          calState.events = data.events || [];
          renderDashboard();
        }
      } catch (_) {}
    }

    async function fetchCalendarEvents() {
      calState.loading = true;
      calState.activeEvent = null;
      renderCalendar();
      try {
        const res = await fetch(api('/api/events'), {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ location: calState.location, radius: calState.radius, types: calState.types })
        });
        const data = await res.json();
        if (data.error === 'no_key') {
          calState.loading = false;
          calState.events = [];
          document.getElementById('calendarView').innerHTML = `
            <div class="empty-state" style="padding:3rem 1rem;">
              <div style="margin-bottom:1rem;"></div>
              <div style="color:#f0f0f0;font-size:16px;margin-bottom:0.75rem;">Almost there</div>
              <div style="color:#555;font-size:13px;line-height:1.7;max-width:300px;margin:0 auto;">
                Add a free <strong style="color:#aaa;">SERPER_API_KEY</strong> to your <code style="color:#e63b30;">.env</code> file to enable live event search.<br><br>
                Get one at <strong style="color:#aaa;">serper.dev</strong> — 2,500 free searches/month.
              </div>
            </div>`;
          return;
        }
        calState.events = data.events || [];
      } catch (err) {
        calState.events = [];
        document.getElementById('calendarView').innerHTML = `<div class="empty-state" style="color:#e63b30;">Couldn't load events. Check your connection.<br><br><button class="log-btn" onclick="fetchCalendarEvents()">Retry</button></div>`;
        calState.loading = false;
        return;
      }
      calState.loading = false;
      renderCalendarContent();
    }

    function toggleCalType(type) {
      const idx = calState.types.indexOf(type);
      if (idx >= 0) {
        if (calState.types.length === 1) return; // keep at least one
        calState.types.splice(idx, 1);
      } else {
        calState.types.push(type);
      }
      saveCalState();
      renderCalendarContent();
    }

    function setCalRadius(r) {
      calState.radius = r;
      saveCalState();
      if (calState.location) refreshCalEvents();
    }

    // ── Belt history helpers ──────────────────────────────────────────────

    async function loadBeltHistory() {
      if (!currentUser) return;
      const { data } = await sb.from('belt_history')
        .select('id, belt, stripes, date_awarded, notes')
        .order('date_awarded', { ascending: false });
      if (data) beltHistory = data;
    }

    async function addBeltEntry(belt, stripes, dateAwarded, notes) {
      if (!currentUser) return;
      const entry = { user_id: currentUser.id, belt, stripes: parseInt(stripes) || 0, date_awarded: dateAwarded || null, notes: notes || '' };
      const { data, error } = await sb.from('belt_history').insert(entry).select().single();
      if (!error && data) beltHistory.unshift(data);
      return { data, error };
    }

    // ── Log modal state ───────────────────────────────────────────────────

    let logState = {
      classType: 'Drilling',
      position: '',
      rounds: 1,
      subsUsed: [],
      subsAgainst: [],
      sweeps: 0,
      escapes: 0,
      customSubInput: null
    };

    const BASE_SUBS = [
      'Armbar','Triangle','Rear Naked Choke','Guillotine','Kimura','Americana','Omoplata',
      "D'Arce",'Anaconda','Arm Triangle','Ezekiel','Baseball Bat Choke',
      'Bow & Arrow','Clock Choke','North-South Choke','Peruvian Necktie',
      'Heel Hook','Inside Heel Hook','Outside Heel Hook','Kneebar','Toe Hold','Calf Slicer',
      'Wrist Lock','Twister'
    ];
    let customSubs = [];
    try { customSubs = JSON.parse(localStorage.getItem('flowmora_custom_subs') || '[]'); } catch(e) {}
    let ALL_SUBS = [...BASE_SUBS, ...customSubs, 'Other'];
    const ALL_POSITIONS = ['Guard','Mount','Back','Side Control','Half Guard','Standing','Other'];

    function showLogModal() {
      logState = { classType: 'Drilling', position: '', rounds: 1, subsUsed: [], subsAgainst: [], sweeps: 0, escapes: 0, customSubInput: null, nemesisRolls: [], subPos: { used: {}, against: {} } };
      renderLogModal();
      document.getElementById('logModal').style.display = 'flex';
      document.body.style.overflow = 'hidden';
    }

    function renderLogModal() {
      const wrap = document.getElementById('logModalInner');
      if (!wrap) return;
      const savedNotes = document.getElementById('log-notes')?.value || '';
      const showRounds = logState.classType !== 'Drilling';
      wrap.innerHTML = `
        <div class="log-form-header">
          <div style="font-size:15px;font-weight:500;color:#f0f0f0;">Log a session</div>
          <button onclick="hideLogModal()" style="background:none;border:none;color:#666;font-size:20px;cursor:pointer;">✕</button>
        </div>

        <button class="voice-log-btn" id="voiceLogBtn" onclick="startVoiceLog()">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M12 14a3 3 0 0 0 3-3V5a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V21h2v-3.08A7 7 0 0 0 19 11h-2z"/></svg>
          Speak your session
        </button>
        <div id="voiceLogLive" style="display:none;background:rgba(230,59,48,0.06);border:0.5px solid rgba(230,59,48,0.25);border-radius:10px;padding:0.6rem 0.8rem;font-size:13px;color:#d8b5b2;line-height:1.5;margin:-0.5rem 0 1.1rem;font-style:italic;"></div>

        <div class="form-group">
          <div class="form-label">Class type</div>
          <div class="pill-group" style="flex-wrap:nowrap;">
            ${['Drilling','Sparring','Competition'].map(t => `<button class="log-pill large ${logState.classType===t?'active':''}" onclick="logSetClass('${t}')">${t}</button>`).join('')}
          </div>
        </div>

        <div class="form-group">
          <div class="form-label">Position</div>
          <div class="pill-group">
            ${ALL_POSITIONS.map(p => `<button class="log-pill ${logState.position===p?'active':''}" onclick="logSetPos('${p}')">${p}</button>`).join('')}
          </div>
        </div>

        ${showRounds ? `
        <div class="form-group">
          <div class="form-label">Rounds rolled</div>
          <div class="counter-row">
            <button class="counter-btn" onclick="logAdj('rounds',-1)">−</button>
            <div class="counter-val" id="log-rounds-val">${logState.rounds}</div>
            <button class="counter-btn" onclick="logAdj('rounds',1)">+</button>
          </div>
        </div>` : ''}

        <div class="form-group">
          <div class="form-label">Submissions used</div>
          <div class="pill-group">
            ${ALL_SUBS.map(s => `<button class="log-pill sub-pill ${s!=='Other'&&logState.subsUsed.includes(s)?'active':''}" onclick="logToggleSub('used','${esc(s.replace(/'/g,"\\'"))}')">${esc(s)}</button>`).join('')}
          </div>
          ${logState.customSubInput==='used'?`
          <div class="custom-sub-row">
            <input id="custom-sub-input-used" class="custom-sub-input" type="text" placeholder="e.g. Loop Choke…" maxlength="40" onkeydown="if(event.key==='Enter')confirmCustomSub('used')">
            <button class="custom-sub-add-btn" onclick="confirmCustomSub('used')">Add</button>
            <button class="custom-sub-cancel-btn" onclick="logState.customSubInput=null;renderLogModal()">✕</button>
          </div>`:''}
        </div>

        <div class="form-group">
          <div class="form-label">Sweeps</div>
          <div class="counter-row">
            <button class="counter-btn" onclick="logAdj('sweeps',-1)">−</button>
            <div class="counter-val" id="log-sweeps-val">${logState.sweeps}</div>
            <button class="counter-btn" onclick="logAdj('sweeps',1)">+</button>
          </div>
        </div>
        <div class="form-group">
          <div class="form-label">Escapes</div>
          <div class="counter-row">
            <button class="counter-btn" onclick="logAdj('escapes',-1)">−</button>
            <div class="counter-val" id="log-escapes-val">${logState.escapes}</div>
            <button class="counter-btn" onclick="logAdj('escapes',1)">+</button>
          </div>
        </div>

        <div class="form-group">
          <div class="form-label">Submissions against me</div>
          <div class="pill-group">
            ${ALL_SUBS.map(s => `<button class="log-pill sub-pill ${s!=='Other'&&logState.subsAgainst.includes(s)?'active':''}" onclick="logToggleSub('against','${esc(s.replace(/'/g,"\\'"))}')">${esc(s)}</button>`).join('')}
          </div>
          ${logState.customSubInput==='against'?`
          <div class="custom-sub-row">
            <input id="custom-sub-input-against" class="custom-sub-input" type="text" placeholder="e.g. Loop Choke…" maxlength="40" onkeydown="if(event.key==='Enter')confirmCustomSub('against')">
            <button class="custom-sub-add-btn" onclick="confirmCustomSub('against')">Add</button>
            <button class="custom-sub-cancel-btn" onclick="logState.customSubInput=null;renderLogModal()">✕</button>
          </div>`:''}
        </div>

        ${(logState.nemesisRolls || []).length ? `
        <div class="form-group">
          <div class="form-label">Rolls detected — added to Nemesis tracking</div>
          ${logState.nemesisRolls.map((r, i) => `
          <div style="display:flex;align-items:center;gap:8px;padding:0.5rem 0;border-bottom:0.5px solid rgba(255,255,255,0.05);">
            <div style="flex:1;min-width:0;">
              <span style="font-size:14px;font-weight:600;color:#e0e0e0;">${esc(r.name)}</span>
              ${!r.nemesisId ? '<span style="font-size:10px;color:#e63b30;margin-left:6px;">new rival</span>' : ''}
            </div>
            ${['win','loss','draw'].map(res => `
              <button class="log-pill sub-pill ${r.result === res ? 'active' : ''}" onclick="logSetNemResult(${i},'${res}')">${res.charAt(0).toUpperCase() + res.slice(1)}</button>`).join('')}
            <button onclick="logRemoveNemRoll(${i})" style="background:none;border:none;color:#555;font-size:16px;cursor:pointer;padding:2px 6px;">✕</button>
          </div>`).join('')}
        </div>` : ''}

        <div class="form-group">
          <div class="form-label">Notes (optional)</div>
          <textarea id="log-notes" class="log-input" rows="2" placeholder="Anything worth remembering?"></textarea>
        </div>

        <button class="submit-btn" onclick="saveManualSession()">Log Session</button>
      `;
      if (savedNotes) { const n = document.getElementById('log-notes'); if (n) n.value = savedNotes; }
    }

    function logSetClass(type) {
      logState.classType = type;
      renderLogModal();
    }

    function logSetNemResult(i, result) {
      if (logState.nemesisRolls?.[i]) { logState.nemesisRolls[i].result = result; renderLogModal(); }
    }

    function logRemoveNemRoll(i) {
      if (logState.nemesisRolls) { logState.nemesisRolls.splice(i, 1); renderLogModal(); }
    }

    function logSetPos(pos) {
      logState.position = logState.position === pos ? '' : pos;
      renderLogModal();
    }

    function logAdj(field, delta) {
      logState[field] = Math.max(0, (logState[field] || 0) + delta);
      const el = document.getElementById(`log-${field}-val`);
      if (el) el.textContent = logState[field];
    }

    function logToggleSub(list, sub) {
      if (sub === 'Other') {
        logState.customSubInput = logState.customSubInput === list ? null : list;
        renderLogModal();
        if (logState.customSubInput) setTimeout(() => document.getElementById(`custom-sub-input-${list}`)?.focus(), 50);
        return;
      }
      const arr = list === 'used' ? logState.subsUsed : logState.subsAgainst;
      const idx = arr.indexOf(sub);
      if (idx >= 0) arr.splice(idx, 1); else arr.push(sub);
      renderLogModal();
    }

    function confirmCustomSub(list) {
      const input = document.getElementById(`custom-sub-input-${list}`);
      const name = input?.value?.trim();
      if (!name) return;
      // Save to localStorage if new
      if (!ALL_SUBS.includes(name)) {
        customSubs.push(name);
        try { localStorage.setItem('flowmora_custom_subs', JSON.stringify(customSubs)); } catch(e) {}
        ALL_SUBS = [...BASE_SUBS, ...customSubs, 'Other'];
      }
      // Add to logState selection
      const arr = list === 'used' ? logState.subsUsed : logState.subsAgainst;
      if (!arr.includes(name)) arr.push(name);
      logState.customSubInput = null;
      renderLogModal();
    }

    function hideLogModal() {
      document.getElementById('logModal').style.display = 'none';
      document.body.style.overflow = '';
      if (voiceLogActive) { try { voiceLogRec.stop(); } catch (e) {} voiceLogActive = false; }
    }

    // ── Voice session logging ─────────────────────────────────────────────
    let voiceLogRec = null;
    let voiceLogActive = false;

    function startVoiceLog() {
      if (!SpeechRecognition) { alert('Voice input is not supported in this browser.'); return; }
      const btn = document.getElementById('voiceLogBtn');
      if (voiceLogActive) { try { voiceLogRec.stop(); } catch (e) {} return; } // tap again = done

      voiceLogRec = new SpeechRecognition();
      voiceLogRec.lang = 'en-US';
      voiceLogRec.continuous = true;
      // iOS Safari often never marks results "final" — capture interim text
      // continuously and commit whatever we have when recognition ends
      voiceLogRec.interimResults = true;
      let best = '';
      voiceLogActive = true;
      window.speechSynthesis?.cancel();
      btn.classList.add('listening');
      btn.innerHTML = 'Listening — describe your session, tap when done';
      const live = document.getElementById('voiceLogLive');
      if (live) { live.style.display = 'block'; live.textContent = '...'; }

      voiceLogRec.onresult = (e) => {
        let text = '';
        for (const r of e.results) text += r[0].transcript;
        if (text.trim()) best = text.trim();
        const lv = document.getElementById('voiceLogLive');
        if (lv && best) lv.textContent = best;
      };
      voiceLogRec.onerror = (e) => {
        if (e.error === 'not-allowed' || e.error === 'service-not-allowed') {
          alert('Microphone access is blocked. On iPhone: Settings > Safari > Microphone, or tap the "aA" icon in the address bar > Website Settings > Microphone > Allow.');
        }
      };
      voiceLogRec.onend = async () => {
        voiceLogActive = false;
        if (!best) { renderLogModal(); return; }
        const b = document.getElementById('voiceLogBtn');
        if (b) { b.classList.remove('listening'); b.classList.add('parsing'); b.innerHTML = 'Building your log...'; }
        await parseVoiceLog(best);
      };
      voiceLogRec.start();
    }

    async function parseVoiceLog(transcript) {
      try {
        const res = await aiFetch('/api/parselog', {
          transcript,
          knownSubs: ALL_SUBS.filter(s => s !== 'Other'),
          knownPositions: ALL_POSITIONS.filter(p => p !== 'Other'),
          knownNemesis: nemesisList.map(n => n.name)
        });
        if (!res.ok) throw new Error('parse failed');
        const d = await res.json();

        // Any new submission names become permanent custom options
        [...(d.subs_used || []), ...(d.subs_against || [])].forEach(name => {
          if (name && !ALL_SUBS.includes(name)) {
            customSubs.push(name);
            ALL_SUBS = [...BASE_SUBS, ...customSubs, 'Other'];
          }
        });
        try { localStorage.setItem('flowmora_custom_subs', JSON.stringify(customSubs)); } catch (e) {}

        logState.classType = d.class_type || logState.classType;
        logState.position = ALL_POSITIONS.includes(d.position) ? d.position : logState.position;
        logState.rounds = d.rounds || logState.rounds;
        logState.sweeps = d.sweeps ?? logState.sweeps;
        logState.escapes = d.escapes ?? logState.escapes;
        logState.subsUsed = [...new Set([...logState.subsUsed, ...(d.subs_used || [])])];
        logState.subsAgainst = [...new Set([...logState.subsAgainst, ...(d.subs_against || [])])];
        // Per-submission positions when the speaker said where it happened
        logState.subPos = {
          used: { ...(logState.subPos?.used || {}), ...(d.subs_used_pos || {}) },
          against: { ...(logState.subPos?.against || {}), ...(d.subs_against_pos || {}) }
        };
        // Match spoken names to tracked rivals (case-insensitive, first-name friendly)
        logState.nemesisRolls = (d.nemesis_rolls || []).map(r => {
          const match = nemesisList.find(n =>
            n.name.toLowerCase() === r.name.toLowerCase() ||
            n.name.toLowerCase().split(/\s+/)[0] === r.name.toLowerCase().split(/\s+/)[0]
          );
          return { name: match ? match.name : r.name, nemesisId: match ? match.id : null, result: r.result, notes: r.notes, track: true };
        });
        renderLogModal();
        if (d.notes) {
          const notesEl = document.getElementById('log-notes');
          if (notesEl) notesEl.value = d.notes;
        }
      } catch (e) {
        renderLogModal();
        const b = document.getElementById('voiceLogBtn');
        if (b) { b.innerHTML = 'Could not understand — try again or fill manually'; setTimeout(renderLogModal, 2500); }
      }
    }

    async function saveManualSession() {
      if (!currentUser) return;
      const notes = document.getElementById('log-notes')?.value?.trim() || '';
      const session = {
        id: crypto.randomUUID(),
        user_id: currentUser.id,
        position: logState.position || 'General',
        problem: '',
        notes,
        date: new Date().toLocaleDateString(),
        drills: [],
        weakness_flag: '',
        class_type: logState.classType,
        sweeps: logState.sweeps,
        escapes: logState.escapes,
        submissions_used: logState.subsUsed,
        submissions_against: logState.subsAgainst,
        rolling_rounds: { rounds: logState.rounds, wins: 0, losses: 0, minutes: 0, subPos: logState.subPos || { used: {}, against: {} } },
        source: 'manual'
      };
      await sb.from('sessions').insert(session);
      cachedSessions.unshift({ ...session, weaknessFlag: '', strengthFlag: '', rollingRounds: session.rolling_rounds });
      saveDetectedNemesisRolls(); // fire-and-forget
      hideLogModal();
      renderProgress();
      requestDebrief(session); // fire-and-forget AI insight
    }

    // Persist nemesis rolls detected by voice logging. Creates the rival
    // first if they aren't tracked yet.
    async function saveDetectedNemesisRolls() {
      const rolls = (logState.nemesisRolls || []).filter(r => r.track !== false);
      if (!rolls.length || !currentUser) return;
      const today = new Date().toISOString().slice(0, 10);
      for (const r of rolls) {
        try {
          let nid = r.nemesisId;
          if (!nid) {
            const { data, error } = await sb.from('nemesis').insert({
              user_id: currentUser.id, name: r.name, belt: 'unknown', type: 'training_partner', gym: null, notes: null
            }).select().single();
            if (error || !data) continue;
            nemesisList.unshift(data);
            nid = data.id;
          }
          const { data: roll, error: rollErr } = await sb.from('nemesis_rolls').insert({
            user_id: currentUser.id, nemesis_id: nid, result: r.result, notes: r.notes || null, date: today
          }).select().single();
          if (!rollErr && roll) {
            if (!nemesisRolls[nid]) nemesisRolls[nid] = [];
            nemesisRolls[nid].unshift(roll);
          }
        } catch (e) { console.error('Nemesis roll save failed:', e); }
      }
      logState.nemesisRolls = [];
    }

    // ── Date / week helpers ───────────────────────────────────────────────

    function toISODate(d) {
      const dt = new Date(d);
      if (isNaN(dt)) return '';
      return dt.toISOString().slice(0,10);
    }

    function sessionsThisWeek(sessions) {
      const now = new Date();
      const day = now.getDay();
      const mon = new Date(now);
      mon.setDate(now.getDate() - (day === 0 ? 6 : day - 1));
      mon.setHours(0,0,0,0);
      const sun = new Date(mon);
      sun.setDate(mon.getDate() + 6);
      sun.setHours(23,59,59,999);
      return sessions.filter(s => {
        const d = new Date(s.date || s.created_at);
        return !isNaN(d) && d >= mon && d <= sun;
      });
    }

    function sessionsLastWeek(sessions) {
      const now = new Date();
      const day = now.getDay();
      const thisMon = new Date(now);
      thisMon.setDate(now.getDate() - (day === 0 ? 6 : day - 1));
      thisMon.setHours(0,0,0,0);
      const lastMon = new Date(thisMon);
      lastMon.setDate(thisMon.getDate() - 7);
      const lastSun = new Date(thisMon);
      lastSun.setDate(thisMon.getDate() - 1);
      lastSun.setHours(23,59,59,999);
      return sessions.filter(s => {
        const d = new Date(s.date || s.created_at);
        return !isNaN(d) && d >= lastMon && d <= lastSun;
      });
    }

    function weeklyPace(sessions) {
      const now = new Date();
      const cutoff = new Date(now);
      cutoff.setDate(now.getDate() - 28);
      const recent = sessions.filter(s => new Date(s.date || s.created_at) >= cutoff);
      return recent.length / 4;
    }

    // ── Badge engine ──────────────────────────────────────────────────────

    const BADGES = [
      // Mastery & Progression
      { id:'first_roll',            img:'/badges/first_roll.png',            name:'First Roll',            desc:'Log your first session',           check:(s)=>s.length>=1 },
      { id:'early_flow',            img:'/badges/early_flow.png',            name:'Early Flow',            desc:'Train 10 sessions',                check:(s)=>s.length>=10 },
      { id:'committed',             img:'/badges/committed.png',             name:'Committed',             desc:'Train 25 sessions',                check:(s)=>s.length>=25 },
      { id:'dedicated',             img:'/badges/dedicated.png',             name:'Dedicated',             desc:'Train 50 sessions',                check:(s)=>s.length>=50 },
      { id:'obsessed',              img:'/badges/obsessed.png',              name:'Obsessed',              desc:'Train 100 sessions',               check:(s)=>s.length>=100 },
      { id:'unstoppable',           img:'/badges/unstoppable.png',           name:'Unstoppable',           desc:'Train 250 sessions',               check:(s)=>s.length>=250 },
      // Competition
      { id:'first_match',           img:'/badges/first_match.png',           name:'First Match',           desc:'Compete in your first match',      check:(s)=>s.some(x=>x.class_type==='Competition') },
      { id:'winner',                img:'/badges/winner.png',                name:'Winner',                desc:'Win your first match',             check:()=>false },
      { id:'podium_finish',         img:'/badges/podium_finish.png',         name:'Podium Finish',         desc:'Place on the podium',              check:()=>false },
      { id:'gold_standard',         img:'/badges/gold_standard.png',         name:'Gold Standard',         desc:'Win a gold medal',                 check:()=>false },
      { id:'tournament_beast',      img:'/badges/tournament_beast.png',      name:'Tournament Beast',      desc:'Win 5 gold medals',                check:()=>false },
      // Technique & Skill
      { id:'sweep_specialist',      img:'/badges/sweep_specialist.png',      name:'Sweep Specialist',      desc:'Land 25 sweeps',                   check:(s)=>s.reduce((a,x)=>a+(x.sweeps||0),0)>=25 },
      { id:'submission_hunter',     img:'/badges/submission_hunter.png',     name:'Submission Hunter',     desc:'Finish 25 submissions',            check:(s)=>s.reduce((a,x)=>a+(x.submissions_used?.length||0),0)>=25 },
      { id:'guardian',              img:'/badges/guardian.png',              name:'Guardian',              desc:'Retain guard for 10 minutes total',check:()=>false },
      { id:'passing_machine',       img:'/badges/passing_machine.png',       name:'Passing Machine',       desc:'Pass guard 50 times',              check:()=>false },
      { id:'back_control',          img:'/badges/back_control.png',          name:'Back Control',          desc:'Secure back control 20 times',     check:()=>false },
      { id:'leg_lock_expert',       img:'/badges/leg_lock_expert.png',       name:'Leg Lock Expert',       desc:'Finish 15 leg lock submissions',   check:(s)=>s.reduce((a,x)=>a+(x.submissions_used||[]).filter(u=>/heel hook|ankle lock|kneebar|toe hold|leg lock/i.test(u)).length,0)>=15 },
      // Consistency
      { id:'week_warrior',          img:'/badges/week_warrior.png',          name:'Week Warrior',          desc:'Train 7 days in a row',            check:(s,k)=>k>=7 },
      { id:'streak_starter',        img:'/badges/streak_starter.png',        name:'Streak Starter',        desc:'Train 7 days in a row',            check:(s,k)=>k>=7 },
      { id:'unbreakable',           img:'/badges/unbreakable.png',           name:'Unbreakable',           desc:'Train 30 days in a row',           check:(s,k)=>k>=30 },
      { id:'relentless',            img:'/badges/relentless.png',            name:'Relentless',            desc:'Train 90 days in a row',           check:(s,k)=>k>=90 },
      { id:'iron_will',             img:'/badges/iron_will.png',             name:'Iron Will',             desc:'Train 180 days in a row',          check:(s,k)=>k>=180 },
      // Intel & Nemesis
      { id:'scout',                 img:'/badges/scout.png',                 name:'Scout',                 desc:'Add your first opponent',          check:(s,k,n)=>n>=1 },
      { id:'analyst',               img:'/badges/analyst.png',               name:'Analyst',               desc:'Complete 5 opponent profiles',     check:(s,k,n)=>n>=5 },
      { id:'strategist',            img:'/badges/strategist.png',            name:'Strategist',            desc:'Review intel before 5 matches',    check:()=>false },
      { id:'nemesis_born',          img:'/badges/nemesis_born.png',          name:'Nemesis Born',          desc:'Mark your first Nemesis',          check:(s,k,n)=>n>=1 },
      { id:'rival',                 img:'/badges/rival.png',                 name:'Rival',                 desc:'Roll against a nemesis 5 times',   check:(s,k,n,r)=>Object.values(r).some(rolls=>rolls.length>=5) },
      { id:'victory_over_nemesis',  img:'/badges/victory_over_nemesis.png',  name:'Victory Over Nemesis',  desc:'Beat nemesis after 3+ losses',     check:(s,k,n,r)=>Object.entries(r).some(([,rolls])=>{const losses=rolls.filter(x=>x.result==='loss').length;const hasWin=rolls.some(x=>x.result==='win');return losses>=3&&hasWin;}) },
      // Growth & Mindset
      { id:'student',               img:'/badges/student.png',               name:'Student',               desc:'Complete your first training note', check:(s)=>s.some(x=>x.notes&&x.notes.trim().length>0) },
      { id:'open_mind',             img:'/badges/open_mind.png',             name:'Open Mind',             desc:'Log a lesson learned',             check:(s)=>s.filter(x=>x.notes&&x.notes.trim().length>0).length>=5 },
      { id:'adapt',                 img:'/badges/adapt.png',                 name:'Adapt',                 desc:'Implement advice and improve',     check:()=>false },
      { id:'mental_edge',           img:'/badges/mental_edge.png',           name:'Mental Edge',           desc:'Log 10 mental training sessions',  check:()=>false },
      { id:'champion_mindset',      img:'/badges/champion_mindset.png',      name:'Champion Mindset',      desc:'Complete a full mindset program',  check:()=>false },
      // Special
      { id:'night_trainer',         img:'/badges/night_trainer.png',         name:'Night Trainer',         desc:'Train after midnight 10 times',    check:(s)=>s.filter(x=>{const h=new Date(x.created_at).getHours();return h>=0&&h<4;}).length>=10 },
      { id:'early_riser',           img:'/badges/early_riser.png',           name:'Early Riser',           desc:'Train before 7am 10 times',        check:(s)=>s.filter(x=>new Date(x.created_at).getHours()<7).length>=10 },
      { id:'flow_state',            img:'/badges/flow_state.png',            name:'Flow State',            desc:'Score 90%+ in a session',          check:()=>false },
      { id:'comeback_kid',          img:'/badges/comeback_kid.png',          name:'Comeback Kid',          desc:'Win a match after being behind',   check:()=>false },
      { id:'perfect_session',       img:'/badges/perfect_session.png',       name:'Perfect Session',       desc:'Score 100% in all categories',     check:()=>false },
      { id:'level_up',              img:'/badges/level_up.png',              name:'Level Up',              desc:'Reach a new personal best',        check:()=>false },
      { id:'black_belt_mind',       img:'/badges/black_belt_mind.png',       name:'Black Belt Mind',       desc:'Demonstrate black belt mentality', check:()=>false },
      { id:'legacy_builder',        img:'/badges/legacy_builder.png',        name:'Legacy Builder',        desc:'Train consistently for 1 year',    check:(s)=>{if(s.length<2)return false;const dates=s.map(x=>new Date(x.date||x.created_at)).filter(d=>!isNaN(d));const span=Math.max(...dates)-Math.min(...dates);return span>=365*24*60*60*1000;} },
      { id:'inspiration',           img:'/badges/inspiration.png',           name:'Inspiration',           desc:'Inspire someone in the community', check:()=>false },
      { id:'the_flow',              img:'/badges/the_flow.png',              name:'The Flow',              desc:'Live the path. Be the example.',   check:()=>false },
    ];

    let _toastQueue = [];
    let _toastRunning = false;

    function showAchievementToast(badge) {
      _toastQueue.push(badge);
      if (!_toastRunning) drainToastQueue();
    }

    function drainToastQueue() {
      if (_toastQueue.length === 0) { _toastRunning = false; return; }
      _toastRunning = true;
      const b = _toastQueue.shift();
      const toast = document.getElementById('achievementToast');
      document.getElementById('toastImg').src = b.img;
      document.getElementById('toastName').textContent = b.name;
      document.getElementById('toastDesc').textContent = b.desc;
      toast.classList.add('show');
      setTimeout(() => {
        toast.classList.remove('show');
        setTimeout(drainToastQueue, 500);
      }, 3500);
    }

    // Seen-badge tracking lives in the user's account (Supabase metadata), not
    // localStorage — so clearing browser cache or switching devices never
    // replays the whole achievement history as toasts.
    let _seenBadges = null;

    function computeBadges(sessions, streak) {
      const nemCount = nemesisList.length;
      const nemRolls = nemesisRolls;
      const computed = BADGES.map(b => ({ ...b, earned: b.check(sessions, streak, nemCount, nemRolls) }));
      if (!currentUser) return computed;

      const earnedIds = computed.filter(b => b.earned).map(b => b.id);

      if (_seenBadges === null) {
        const meta = currentUser.user_metadata || {};
        if (Array.isArray(meta.seen_badges)) {
          _seenBadges = new Set(meta.seen_badges);
        } else {
          // First load on this account: mark everything already earned as seen,
          // silently — no toast parade
          _seenBadges = new Set(earnedIds);
          sb.auth.updateUser({ data: { seen_badges: earnedIds } }).catch(() => {});
          return computed;
        }
      }

      const newlyEarned = computed.filter(b => b.earned && !_seenBadges.has(b.id));
      if (newlyEarned.length > 0) {
        newlyEarned.forEach(b => { _seenBadges.add(b.id); showAchievementToast(b); });
        sb.auth.updateUser({ data: { seen_badges: [..._seenBadges] } }).catch(() => {});
      }

      return computed;
    }

    // ── Dashboard ─────────────────────────────────────────────────────────

    const BELT_HEX = { white: '#f0f0f0', blue: '#4a90e2', purple: '#7b4fa6', brown: '#8B4513', black: '#333333' };

    function computeDrillRec(sessions) {
      if (!sessions.length) return null;
      const recent = sessions.slice(0, 10);

      // Priority 1 — most recent weakness flag
      const wkSession = recent.find(s => s.weakness_flag || s.weaknessFlag);
      if (wkSession) {
        const wf = (wkSession.weakness_flag || wkSession.weaknessFlag).slice(0, 120);
        return {
          title: wf,
          why: 'Flagged as a weakness in your recent training.',
          query: `I need to fix this specific weakness: "${wf}". Give me one focused drill I can do today, including key details and common mistakes to avoid.`
        };
      }

      // Priority 2 — submission they keep getting caught by (≥2 times in last 10)
      const subCounts = {}, subPos = {};
      recent.forEach(s => {
        const posMap = s.rolling_rounds?.subPos?.against || {};
        (s.submissions_against || []).forEach(raw => {
          const sub = normalizeSub(raw);
          subCounts[sub] = (subCounts[sub] || 0) + 1;
          if (!subPos[sub]) subPos[sub] = posMap[raw] || s.position || 'General';
        });
      });
      const topCaught = Object.entries(subCounts).sort((a,b) => b[1]-a[1])[0];
      if (topCaught && topCaught[1] >= 2) {
        const [sub, cnt] = topCaught;
        const pos = subPos[sub];
        return {
          title: `Defending the ${sub}`,
          why: `You've been caught by it ${cnt}x in recent sessions from ${pos}.`,
          query: `I keep getting caught by the ${sub} when I'm in ${pos}. Give me the key defense mechanics, early warning signs to feel, and one specific escape drill I can practice today.`
        };
      }

      // Priority 3 — least-trained position from last 20 sessions
      const posCounts = {};
      const drillPositions = ['Guard','Mount','Back','Side Control','Half Guard'];
      sessions.slice(0, 20).forEach(s => { if (s.position) posCounts[s.position] = (posCounts[s.position] || 0) + 1; });
      const leastPos = [...drillPositions].sort((a,b) => (posCounts[a]||0) - (posCounts[b]||0))[0];
      return {
        title: `${leastPos} fundamentals`,
        why: `Your least-trained position — worth building up intentionally.`,
        query: `I want to improve my ${leastPos} game. What are the most important concepts and mechanics I should know, and give me one focused drill I can work on today?`
      };
    }

    // Canonical submission names — old logs ("RNC") and voice variants
    // ("Darce") must count as the same technique as their current names,
    // or radar spokes and vulnerability rows split into duplicates.
    const SUB_ALIASES = {
      'rnc': 'Rear Naked Choke',
      'rear naked': 'Rear Naked Choke',
      'darce': "D'Arce",
      "d'arce choke": "D'Arce",
      'darce choke': "D'Arce",
      'arm bar': 'Armbar',
      'triangle choke': 'Triangle',
      'knee bar': 'Kneebar',
      'americana lock': 'Americana',
      'guillotine choke': 'Guillotine'
    };
    function normalizeSub(name) {
      const key = String(name || '').trim().toLowerCase();
      return SUB_ALIASES[key] || String(name || '').trim();
    }

    function computeVulnerabilities(sessions) {
      const map = {};
      sessions.forEach(s => {
        const sessionPos = s.position || 'General';
        const posMap = s.rolling_rounds?.subPos?.against || {};
        (s.submissions_against || []).forEach(sub => {
          // Prefer the position the submission actually happened from
          // (captured by voice logging); fall back to the session position
          const pos = posMap[sub] || sessionPos;
          const key = `${pos}||${normalizeSub(sub)}`;
          map[key] = (map[key] || 0) + 1;
        });
      });
      return Object.entries(map)
        .sort((a,b) => b[1]-a[1])
        .slice(0, 5)
        .map(([key, count]) => {
          const [pos, sub] = key.split('||');
          return { pos, sub, count };
        });
    }

    function drillWithMentor(query) {
      showView('mentor');
      setTimeout(() => {
        const input = document.getElementById('problem');
        if (input) {
          input.value = query;
          input.dispatchEvent(new Event('input'));
          const btn = document.getElementById('submitBtn');
          if (btn && !btn.disabled) btn.click();
        }
      }, 300);
    }

    // ── Post-session coach debrief ────────────────────────────────────────
    // After a session is logged, ask the AI for one insight comparing it to
    // recent history. Fire-and-forget: failures stay silent, logging never blocks.
    async function requestDebrief(session) {
      try {
        // silent: a quota stop during the save flow shouldn't pop the paywall
        // over the progress screen — the debrief just doesn't appear
        const res = await aiFetch('/api/debrief', {
          session,
          recentSessions: cachedSessions.slice(1, 9), // history before this log
          profile: { belt: userProfile.belt }
        }, { silent: true });
        if (!res.ok) return;
        const data = await res.json();
        if (data.insight) showDebriefSheet(data.insight, data.question);
      } catch (e) {}
    }

    function showDebriefSheet(insight, question) {
      dismissDebrief();
      window._debriefQuery = question || '';
      const el = document.createElement('div');
      el.className = 'debrief-sheet';
      el.id = 'debriefSheet';
      el.innerHTML = `
        <div class="debrief-eyebrow">Coach's Debrief</div>
        <div class="debrief-text">${esc(insight)}</div>
        <div class="debrief-actions">
          ${question ? `<button class="debrief-go-btn" onclick="dismissDebrief();drillWithMentor(window._debriefQuery)">Get the plan →</button>` : ''}
          <button class="debrief-dismiss-btn" onclick="dismissDebrief()">Dismiss</button>
        </div>`;
      document.body.appendChild(el);
      requestAnimationFrame(() => requestAnimationFrame(() => el.classList.add('open')));
    }

    function dismissDebrief() {
      const el = document.getElementById('debriefSheet');
      if (el) { el.classList.remove('open'); setTimeout(() => el.remove(), 400); }
    }

    // ── Shareable achievement cards ───────────────────────────────────────
    async function shareBadge(idx) {
      const b = (window._earnedBadges || [])[idx];
      if (!b) return;

      const size = 1080;
      const canvas = document.createElement('canvas');
      canvas.width = size; canvas.height = size;
      const ctx = canvas.getContext('2d');

      // Background: deep dark with red glow
      const bg = ctx.createRadialGradient(size/2, size*0.38, 80, size/2, size/2, size*0.75);
      bg.addColorStop(0, '#1c0a08');
      bg.addColorStop(0.45, '#0a0510');
      bg.addColorStop(1, '#05040c');
      ctx.fillStyle = bg;
      ctx.fillRect(0, 0, size, size);

      // Badge image with glow ring
      try {
        const img = new Image();
        img.src = b.img;
        await img.decode();
        const bs = 400;
        const bx = (size - bs) / 2, by = 170;
        ctx.save();
        ctx.shadowColor = 'rgba(230,59,48,0.55)';
        ctx.shadowBlur = 70;
        ctx.drawImage(img, bx, by, bs, bs);
        ctx.restore();
        // Scan ring under the badge
        ctx.strokeStyle = 'rgba(230,59,48,0.7)';
        ctx.lineWidth = 4;
        ctx.shadowColor = 'rgba(230,59,48,0.8)';
        ctx.shadowBlur = 24;
        ctx.beginPath();
        ctx.ellipse(size/2, by + bs + 28, 230, 16, 0, 0, Math.PI * 2);
        ctx.stroke();
        ctx.shadowBlur = 0;
      } catch (e) {}

      ctx.textAlign = 'center';
      // Eyebrow
      ctx.fillStyle = '#e63b30';
      ctx.font = '600 30px -apple-system, system-ui, sans-serif';
      ctx.fillText('A C H I E V E M E N T   U N L O C K E D', size/2, 120);
      // Badge name
      ctx.fillStyle = '#f5f5f5';
      ctx.font = '700 72px -apple-system, system-ui, sans-serif';
      ctx.fillText(b.name, size/2, 710);
      // Description
      ctx.fillStyle = '#8a8a8a';
      ctx.font = '400 32px -apple-system, system-ui, sans-serif';
      ctx.fillText(b.desc || '', size/2, 765);
      // Athlete line
      const beltName = userProfile.belt ? userProfile.belt.charAt(0).toUpperCase() + userProfile.belt.slice(1) + ' Belt' : '';
      const athleteLine = [userProfile.name, beltName].filter(Boolean).join('  ·  ');
      if (athleteLine) {
        ctx.fillStyle = '#c9c9c9';
        ctx.font = '600 34px -apple-system, system-ui, sans-serif';
        ctx.fillText(athleteLine, size/2, 850);
      }
      // Wordmark
      ctx.fillStyle = '#e63b30';
      ctx.font = '700 44px -apple-system, system-ui, sans-serif';
      ctx.fillText('F L O W M O R A', size/2, 960);
      ctx.fillStyle = '#666';
      ctx.font = '400 26px -apple-system, system-ui, sans-serif';
      ctx.fillText('your ai mentor on the mats', size/2, 1002);

      canvas.toBlob(async blob => {
        if (!blob) return;
        const file = new File([blob], 'flowmora-achievement.png', { type: 'image/png' });
        if (navigator.canShare && navigator.canShare({ files: [file] })) {
          try { await navigator.share({ files: [file], text: `${b.name} — earned on Flowmora` }); } catch (e) {}
        } else {
          const a = document.createElement('a');
          a.href = URL.createObjectURL(blob);
          a.download = 'flowmora-achievement.png';
          a.click();
          setTimeout(() => URL.revokeObjectURL(a.href), 5000);
        }
      }, 'image/png');
    }

    function renderDashboard() {
      const view = document.getElementById('dashboardView');
      const sessions = cachedSessions;
      const streak = calculateStreak(sessions);
      const hour = new Date().getHours();
      const greeting = hour < 12 ? 'morning' : hour < 17 ? 'afternoon' : 'evening';
      const firstName = userProfile.name ? userProfile.name.split(' ')[0] : 'Athlete';

      // Belt card
      const beltColor = BELT_HEX[userProfile.belt] || '#4a90e2';
      const stripes = userProfile.stripes || 0;
      const stripeDots = [0,1,2,3].map(i => `<div class="stripe-dot${i < stripes ? ' filled' : ''}"></div>`).join('');
      const targetDate = userProfile.target_promotion ? `Targeting ${new Date(userProfile.target_promotion + 'T00:00:00').toLocaleDateString('en-US', { month: 'long', year: 'numeric' })}` : '';

      // Quick stats
      const now = new Date();
      const thisMonth = sessions.filter(s => {
        const d = new Date(s.date); return d.getFullYear() === now.getFullYear() && d.getMonth() === now.getMonth();
      });
      const totalRounds = sessions.reduce((a, s) => a + (s.rolling_rounds?.rounds || 0), 0);
      const totalSubs = sessions.reduce((a, s) => a + (s.submissions_used?.length || 0), 0);
      // Sub rate = % of sparring/competition sessions where at least one submission was landed (always 0-100%)
      const sparringSessions = sessions.filter(s => s.class_type === 'Sparring' || s.class_type === 'Competition');
      const sparringWithSub = sparringSessions.filter(s => (s.submissions_used?.length || 0) > 0);
      const subRate = sparringSessions.length > 0 ? Math.round((sparringWithSub.length / sparringSessions.length) * 100) : 0;

      // Submission breakdown (normalized so "RNC" and "Rear Naked Choke" merge)
      const subCounts = {};
      sessions.forEach(s => (s.submissions_used || []).forEach(sub => { const n = normalizeSub(sub); subCounts[n] = (subCounts[n] || 0) + 1; }));
      const topSubs = Object.entries(subCounts).sort((a, b) => b[1] - a[1]).slice(0, 5);
      const maxSubCount = topSubs[0]?.[1] || 1;

      // Roll stats — submissions live in the subs arrays from the log forms,
      // but the per-session "Rolling rounds" editor writes wins/losses counts.
      // Take whichever is larger per session so both sources count without
      // double-counting.
      const totalSubsAll = sessions.reduce((a, s) =>
        a + Math.max(s.submissions_used?.length || 0, s.rolling_rounds?.wins || 0), 0);
      const totalTapped = sessions.reduce((a, s) =>
        a + Math.max(s.submissions_against?.length || 0, s.rolling_rounds?.losses || 0), 0);
      const totalSweeps = sessions.reduce((a, s) => a + (s.sweeps || 0), 0);
      const totalEscapes = sessions.reduce((a, s) => a + (s.escapes || 0), 0);

      // Last session
      const last = sessions[0];

      // Today's focus
      const latestWeakness = sessions.find(s => s.weaknessFlag || s.weakness_flag);
      const focusText = latestWeakness ? (latestWeakness.weaknessFlag || latestWeakness.weakness_flag) : null;
      const latestStrength = sessions.find(s => s.strengthFlag || s.strength_flag);
      const strengthText = latestStrength ? (latestStrength.strengthFlag || latestStrength.strength_flag) : null;

      // Daily drill recommendation & vulnerability map
      const drillRec = sessions.length > 0 ? computeDrillRec(sessions) : null;
      const vulns = computeVulnerabilities(sessions);
      // Store queries in window so onclick handlers can reference them safely (avoids quote-escaping issues)
      window._drillQuery = drillRec ? drillRec.query : '';
      window._vulnQueries = vulns.map(v => `I keep getting caught by the ${v.sub} when I'm in ${v.pos}. Break down the key defense mechanics, early warning signs to recognize it coming, and give me one focused escape drill to practice today.`);

      // Upcoming event — filter to future only (same logic as calendar tab), then pick earliest
      const today = new Date(); today.setHours(0,0,0,0);
      const upcomingEvent = (() => {
        if (!calState.events || calState.events.length === 0) return null;
        const future = calState.events.filter(e => {
          const parsed = parseEventDate(e.date);
          // Drop if we have any parsed date (with or without year) that is in the past
          if (parsed && parsed.date < today) return false;
          return true;
        });
        // Sort by parsed date ascending, undated events go last
        future.sort((a, b) => {
          const da = parseEventDate(a.date);
          const db = parseEventDate(b.date);
          if (da && db) return da.date - db.date;
          if (da) return -1;
          if (db) return 1;
          return 0;
        });
        return future[0] || null;
      })();

      // Nemesis dashboard data
      const totalNemesis = nemesisList.length;
      const allNemesisRolls = Object.values(nemesisRolls).flat();
      const nemTotalW = allNemesisRolls.filter(r => r.result === 'win').length;
      const nemTotalL = allNemesisRolls.filter(r => r.result === 'loss').length;
      const nemTotalD = allNemesisRolls.filter(r => r.result === 'draw').length;
      const recentNemesisRolls = allNemesisRolls
        .sort((a, b) => new Date(b.date || b.created_at) - new Date(a.date || a.created_at))
        .slice(0, 2)
        .map(r => ({ ...r, nemesisName: nemesisList.find(n => n.id === r.nemesis_id)?.name || 'Unknown' }));
      const thirtyDaysAgo = new Date();
      thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
      const rematchReminders = nemesisList.filter(n => {
        const rolls = (nemesisRolls[n.id] || []).slice().sort((a, b) => new Date(b.date) - new Date(a.date));
        return rolls.length > 0 && new Date(rolls[0].date) < thirtyDaysAgo;
      }).slice(0, 2);

      // Heatmap
      // (radar drawn after innerHTML set)

      // ── Accountability data ───────────────────────────────────────────
      const todayISO = toISODate(new Date());
      const trainedToday = sessions.some(s => toISODate(s.date || s.created_at) === todayISO);
      const isMonday = new Date().getDay() === 1;
      const weeklyGoal = userProfile.weeklyGoal || 3;
      const thisWeekSessions = sessionsThisWeek(sessions);
      const lastWeekSessions = sessionsLastWeek(sessions);
      const pace = weeklyPace(sessions);
      const badges = computeBadges(sessions, streak);
      window._earnedBadges = badges.filter(b => b.earned); // for shareBadge()

      // Weekly goal ring
      const ringOffset = Math.round(213.6 * (1 - Math.min(thisWeekSessions.length / weeklyGoal, 1)));
      const goalMet = thisWeekSessions.length >= weeklyGoal;

      // Last week recap
      const lwPosCounts = {};
      lastWeekSessions.forEach(s => { if (s.position) lwPosCounts[s.position] = (lwPosCounts[s.position] || 0) + 1; });
      const lwTopPos = Object.entries(lwPosCounts).sort((a,b)=>b[1]-a[1])[0];

      // Promotion countdown
      let promoDaysLeft = null;
      let promoSessionsAtPace = null;
      let promoPassed = false;
      if (userProfile.target_promotion) {
        const promoDate = new Date(userProfile.target_promotion + 'T00:00:00');
        const msLeft = promoDate - new Date();
        promoDaysLeft = Math.ceil(msLeft / 86400000);
        promoPassed = promoDaysLeft < 0;
        promoSessionsAtPace = Math.round(pace * (promoDaysLeft / 7));
      }

      let html = `
        <!-- ── Holographic centerpiece ── -->
        <div class="dash-hero-wrap">
          <img class="dash-hero-img" src="/hero.jpg" alt="" decoding="async" fetchpriority="high"
               onerror="this.style.display='none';this.parentElement.style.background='radial-gradient(ellipse at 50% 60%, rgba(230,59,48,0.15) 0%, rgba(5,4,12,1) 70%)'">
          <div class="dash-hero-top">
            <div class="greeting-text">Good ${greeting}, <span>${esc(firstName)}!</span></div>
            <div class="streak-banner" style="margin-top:0.5rem;">${streak > 0 ? streak + '-day streak' : 'Start your streak today'}</div>
          </div>
          <div class="dash-hero-stats">
            <div class="hero-stat">
              <div class="qs-value">${sessions.length}</div>
              <div class="qs-label">Sessions</div>
            </div>
            <div class="hero-stat">
              <div class="qs-value">${thisMonth.length}</div>
              <div class="qs-label">This month</div>
            </div>
            <div class="hero-stat">
              <div class="qs-value">${sparringSessions.length > 0 ? subRate + '%' : '—'}</div>
              <div class="qs-label">Sub rate</div>
            </div>
          </div>
        </div>

        <div class="belt-card" style="margin-top:1rem;">
          <div class="belt-card-left">
            <div class="belt-card-name" style="color:${beltColor};">${userProfile.belt.charAt(0).toUpperCase() + userProfile.belt.slice(1)} Belt</div>
            <div class="stripe-dots">${stripeDots}</div>
            ${targetDate ? `<div class="belt-target-date">${targetDate}</div>` : ''}
          </div>
          <div class="belt-bar" style="background:${beltColor};box-shadow:0 0 14px ${beltColor};"></div>
        </div>

        ${streak > 0 && !trainedToday ? `<div class="risk-banner">Train today or lose your <strong>${streak}-day streak</strong></div>` : ''}

        <div class="quick-actions" style="margin-top:0.25rem;">
          <button class="qa-btn primary" onclick="showView('mentor')">Ask the Mentor</button>
          <button class="qa-btn" onclick="showLogModal()">+ Log Session</button>
        </div>

        ${drillRec ? `
        <div class="drill-rec-card">
          <div class="drill-rec-eyebrow">Today's Drill</div>
          <div class="drill-rec-title">${esc(drillRec.title)}</div>
          <div class="drill-rec-why">${esc(drillRec.why)}</div>
          <button class="drill-rec-btn" onclick="drillWithMentor(window._drillQuery)">▶ Start Drilling</button>
        </div>` : ''}

        ${isMonday && lastWeekSessions.length > 0 ? `
        <div class="dash-card" style="margin-bottom:1rem;">
          <div class="section-title" style="margin-bottom:0.75rem;">Last week recap</div>
          <div style="display:flex;gap:1rem;flex-wrap:wrap;">
            <div class="stat-card"><div class="stat-label">Sessions</div><div class="stat-value">${lastWeekSessions.length}</div><div class="stat-sub">goal: ${weeklyGoal}</div></div>
            <div class="stat-card"><div class="stat-label">vs goal</div><div class="stat-value" style="font-size:16px;color:${lastWeekSessions.length >= weeklyGoal ? '#4ade80' : '#e24b4a'}">${lastWeekSessions.length >= weeklyGoal ? '✓ Met' : '✗ Missed'}</div></div>
            <div class="stat-card"><div class="stat-label">Top position</div><div class="stat-value" style="font-size:14px;">${lwTopPos ? lwTopPos[0] : '—'}</div></div>
          </div>
        </div>` : ''}

        <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem;">
          <div class="dash-card" style="text-align:center;">
            <div class="section-title" style="margin-bottom:0.75rem;">Weekly goal</div>
            <svg width="90" height="90" viewBox="0 0 80 80" style="display:block;margin:0 auto 0.5rem;">
              <circle cx="40" cy="40" r="34" fill="none" stroke="rgba(255,255,255,0.07)" stroke-width="7"/>
              <circle cx="40" cy="40" r="34" fill="none" stroke="#e63b30" stroke-width="7"
                stroke-dasharray="213.6" stroke-dashoffset="${ringOffset}" stroke-linecap="round"
                transform="rotate(-90 40 40)"/>
              <text x="40" y="37" text-anchor="middle" fill="#f0f0f0" font-size="15" font-weight="700">${thisWeekSessions.length}/${weeklyGoal}</text>
              <text x="40" y="51" text-anchor="middle" fill="#666" font-size="10">sessions</text>
            </svg>
            <div style="font-size:11px;color:#666;">This week</div>
            ${goalMet ? '<div style="font-size:12px;color:#e63b30;margin-top:4px;">Goal met!</div>' : ''}
          </div>
          <div class="dash-card" style="text-align:center;">
            <div class="section-title" style="margin-bottom:0.75rem;">Promotion</div>
            ${userProfile.target_promotion ? (promoPassed
              ? '<div style="font-size:12px;color:#e63b30;line-height:1.5;">Promotion date passed — update your profile!</div>'
              : `<div style="font-size:36px;font-weight:700;color:#f0f0f0;line-height:1;">${promoDaysLeft}</div>
                 <div style="font-size:11px;color:#666;margin-top:4px;">days to promotion</div>
                 <div style="font-size:11px;color:#555;margin-top:8px;line-height:1.5;">At your pace (~${pace.toFixed(1)}/wk) you'll log ~${promoSessionsAtPace} sessions before then</div>`)
              : '<div style="font-size:12px;color:#555;line-height:1.5;">Set a promotion target in your profile</div>'}
          </div>
        </div>

        <div class="section-title">Roll stats</div>
        <div class="roll-stats">
          <div class="stat-card"><div class="stat-label">Submissions</div><div class="stat-value">${totalSubsAll}</div></div>
          <div class="stat-card"><div class="stat-label">Tapped out</div><div class="stat-value">${totalTapped}</div></div>
          <div class="stat-card"><div class="stat-label">Sweeps</div><div class="stat-value">${totalSweeps}</div></div>
          <div class="stat-card"><div class="stat-label">Escapes</div><div class="stat-value">${totalEscapes}</div></div>
        </div>

        <div class="section-title">Submission radar</div>
        <div class="radar-wrap"><div id="submissionRadar"></div></div>

        ${vulns.length > 0 ? `
        <div class="section-title">Vulnerability Map</div>
        <div class="vuln-card">
          ${vulns.map((v, i) => `
          <div class="vuln-row">
            <div class="vuln-rank">${i + 1}</div>
            <div class="vuln-info">
              <div class="vuln-sub">${esc(v.sub)}</div>
              <div class="vuln-pos">from ${esc(v.pos)}</div>
            </div>
            <div class="vuln-count">${v.count}×</div>
            <button class="vuln-fix-btn" onclick="drillWithMentor(window._vulnQueries[${i}])">Fix it →</button>
          </div>`).join('')}
        </div>` : ''}

        ${focusText ? `
        <div class="section-title">Today's focus</div>
        <div class="focus-card"><div class="focus-label">Work on this</div><div class="focus-text">${focusText}</div></div>` : ''}
        ${strengthText ? `
        <div class="strength-flag" style="margin-bottom:1rem;"><div class="strength-label">Your strength</div>${strengthText}</div>` : ''}

        <div class="dash-card" style="margin-bottom:1rem;">
          <div style="display:flex;justify-content:space-between;align-items:baseline;margin-bottom:1rem;">
            <div class="section-title" style="margin-bottom:0;">Achievements</div>
            ${badges.filter(b => b.earned).length > 0 ? '<div style="font-size:10px;color:#555;">tap a badge to share</div>' : ''}
          </div>
          ${badges.filter(b => b.earned).length === 0
            ? `<div style="font-size:13px;color:#444;">Log sessions to start earning achievements.</div>`
            : `<div class="badge-grid">
            ${badges.filter(b => b.earned).map((b, i) => `
              <div class="badge-item earned" style="animation-delay:${(i * 0.7).toFixed(1)}s;cursor:pointer;" title="${b.desc} — tap to share" onclick="shareBadge(${i})">
                <div class="badge-img-wrap">
                  <img src="${b.img}" alt="${b.name}" loading="lazy">
                </div>
                <div class="badge-name">${b.name}</div>
                <div class="badge-status earned">✦ Earned</div>
              </div>`).join('')}
          </div>`}
        </div>

        ${last ? `
        <div class="section-title">Last session</div>
        <div class="last-session-card" onclick="showView('progress')">
          <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.4rem;">
            <div class="session-pos">${last.position || 'General'}</div>
            <div class="session-date">${last.date}</div>
          </div>
          ${last.weaknessFlag || last.weakness_flag ? `<div style="font-size:13px;color:#888;">${esc((last.weaknessFlag || last.weakness_flag).slice(0,100))}</div>` : ''}
          <div style="font-size:12px;color:#555;margin-top:0.5rem;">Tap to view all sessions ›</div>
        </div>` : ''}

        ${totalNemesis > 0 ? `
        <div class="section-title">Nemesis</div>
        <div class="dash-card" style="margin-bottom:1rem;">
          <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.75rem;">
            <div style="font-size:12px;color:#555;">${totalNemesis} tracked</div>
            <div style="display:flex;gap:12px;">
              <span style="font-size:13px;font-weight:700;color:#4ade80;">${nemTotalW}W</span>
              <span style="font-size:13px;font-weight:700;color:#e63b30;">${nemTotalL}L</span>
              <span style="font-size:13px;font-weight:700;color:#888;">${nemTotalD}D</span>
            </div>
          </div>
          ${recentNemesisRolls.map(r => `
          <div style="display:flex;justify-content:space-between;align-items:center;padding:0.5rem 0;border-top:0.5px solid rgba(255,255,255,0.05);">
            <div>
              <div style="font-size:13px;color:#e0e0e0;font-weight:500;">${r.nemesisName}</div>
              ${r.notes ? `<div style="font-size:12px;color:#555;">${r.notes.slice(0, 60)}</div>` : ''}
            </div>
            <span class="roll-result ${r.result}">${r.result.charAt(0).toUpperCase() + r.result.slice(1)}</span>
          </div>`).join('')}
          ${rematchReminders.length > 0 ? `
          <div style="padding-top:0.75rem;margin-top:0.25rem;border-top:0.5px solid rgba(255,255,255,0.05);">
            <div style="font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#854f0b;margin-bottom:0.5rem;">Due for a rematch</div>
            ${rematchReminders.map(n => `<div style="font-size:13px;color:#ef9f27;margin-bottom:0.25rem;">↩ ${n.name}</div>`).join('')}
          </div>` : ''}
          <button class="log-btn" style="width:100%;margin-top:0.75rem;background:rgba(255,255,255,0.05);color:#888;border:0.5px solid rgba(255,255,255,0.1);" onclick="showView('nemesis')">View all ›</button>
        </div>` : ''}

        <div class="section-title">Upcoming event</div>
        <div class="upcoming-card">
          ${upcomingEvent
            ? `<div style="font-size:13px;font-weight:500;color:#f0f0f0;margin-bottom:0.25rem;">${upcomingEvent.title}</div>
               ${upcomingEvent.date ? `<div style="font-size:12px;color:#e63b30;">${upcomingEvent.date}</div>` : ''}
               ${upcomingEvent.location ? `<div style="font-size:12px;color:#555;">${upcomingEvent.location}</div>` : ''}`
            : `<div style="font-size:13px;color:#555;">No events loaded — check Calendar tab.</div>`}
        </div>

      `;

      view.innerHTML = html;
      drawSubmissionRadar(subCounts);
    }

    function drawSubmissionRadar(subCounts) {
      const el = document.getElementById('submissionRadar');
      if (!el) return;
      const entries = Object.entries(subCounts).sort((a, b) => b[1] - a[1]).slice(0, 8);
      if (entries.length < 2) {
        el.innerHTML = '<div style="font-size:13px;color:#555;padding:1.5rem 0;text-align:center;">Log rolls with submissions to see your radar.</div>';
        return;
      }
      const size = 260;
      const cx = size / 2, cy = size / 2;
      const radius = 80;
      const n = entries.length;
      const maxVal = entries[0][1];
      const angle = i => -Math.PI / 2 + (i * 2 * Math.PI) / n;
      const pt = (i, val) => {
        const r = (val / maxVal) * radius;
        return [cx + r * Math.cos(angle(i)), cy + r * Math.sin(angle(i))];
      };
      const rings = [0.25, 0.5, 0.75, 1.0].map(pct => {
        const pts = entries.map((_, i) => { const r = pct * radius; return [cx + r * Math.cos(angle(i)), cy + r * Math.sin(angle(i))]; });
        return `<polygon points="${pts.map(p => p.join(',')).join(' ')}" fill="none" stroke="rgba(255,255,255,0.06)" stroke-width="1"/>`;
      }).join('');
      const spokes = entries.map((_, i) => { const [x, y] = pt(i, maxVal); return `<line x1="${cx}" y1="${cy}" x2="${x}" y2="${y}" stroke="rgba(255,255,255,0.06)" stroke-width="1"/>`; }).join('');
      const dataPts = entries.map((e, i) => pt(i, e[1]));
      const dataPath = dataPts.map(([x, y], i) => `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`).join(' ') + 'Z';
      const dots = dataPts.map(([x, y]) => `<circle cx="${x.toFixed(1)}" cy="${y.toFixed(1)}" r="3.5" fill="#e63b30" filter="url(#rglow)"/>`).join('');
      const labels = entries.map(([name, count], i) => {
        const lx = cx + (radius + 26) * Math.cos(angle(i));
        const ly = cy + (radius + 26) * Math.sin(angle(i));
        const anchor = Math.cos(angle(i)) > 0.15 ? 'start' : Math.cos(angle(i)) < -0.15 ? 'end' : 'middle';
        const display = esc(name.length > 11 ? name.slice(0, 10) + '…' : name);
        return `<text x="${lx.toFixed(1)}" y="${(ly - 5).toFixed(1)}" text-anchor="${anchor}" fill="#aaa" font-size="10" font-family="inherit">${display}</text>
                <text x="${lx.toFixed(1)}" y="${(ly + 7).toFixed(1)}" text-anchor="${anchor}" fill="#555" font-size="9" font-family="inherit">${count}×</text>`;
      }).join('');
      el.innerHTML = `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
        <defs><filter id="rglow"><feGaussianBlur stdDeviation="2.5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs>
        ${rings}${spokes}
        <path d="${dataPath}" fill="rgba(230,59,48,0.12)" stroke="#e63b30" stroke-width="1.5" stroke-linejoin="round"/>
        ${dots}${labels}
      </svg>`;
    }


    // ── Push notifications (Phase 2) ──────────────────────────────────────
    // Groundwork: streak-at-risk and weekly-goal reminders will trigger from here.
    // Requires: PWA manifest + service worker registration.
    // The data is ready: calculateStreak(cachedSessions), sessionsThisWeek(cachedSessions),
    // userProfile.weeklyGoal, userProfile.target_promotion.
    async function requestPushPermission() {
      if (!('Notification' in window)) return;
      const perm = await Notification.requestPermission();
      return perm === 'granted';
    }
    // TODO Phase 2: register service worker, subscribe to push, send token to server

    // ── Streak calculation ────────────────────────────────────────────────

    function calculateStreak(sessions) {
      if (sessions.length === 0) return 0;
      const toYMD = d => { const dt = new Date(d); return `${dt.getFullYear()}-${dt.getMonth()}-${dt.getDate()}`; };
      const dates = [...new Set(sessions.map(s => toYMD(s.date)))];
      if (dates[0] !== toYMD(new Date().toLocaleDateString())) return 0;
      let streak = 1;
      for (let i = 1; i < dates.length; i++) {
        const diff = Math.round((new Date(sessions[i-1].date) - new Date(sessions[i].date)) / 86400000);
        if (diff === 1) streak++; else break;
      }
      return streak;
    }

    // ── Skills tab ────────────────────────────────────────────────

    const TECHNIQUE_DB = [
      {
        id: 'closed_guard', name: 'Closed Guard', icon: '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l7 3v5c0 4.4-2.9 7.4-7 9-4.1-1.6-7-4.6-7-9V6z"/></svg>', color: '#e63b30',
        desc: 'Control your opponent between your legs — the foundation of guard play.',
        techniques: [
          { id:'cg_armbar',       name:'Armbar',            belt:'white',  type:'submission', links:['cg_triangle','cg_omoplata'] },
          { id:'cg_triangle',     name:'Triangle Choke',    belt:'white',  type:'submission', links:['cg_armbar','cg_omoplata'] },
          { id:'cg_kimura',       name:'Kimura',            belt:'white',  type:'submission', links:['cg_hip_bump','cg_guillotine'] },
          { id:'cg_guillotine',   name:'Guillotine',        belt:'white',  type:'submission', links:['cg_hip_bump'] },
          { id:'cg_omoplata',     name:'Omoplata',          belt:'blue',   type:'submission', links:['cg_triangle','cg_armbar'] },
          { id:'cg_hip_bump',     name:'Hip Bump Sweep',    belt:'white',  type:'sweep',      links:['cg_kimura','cg_guillotine'] },
          { id:'cg_scissor',      name:'Scissor Sweep',     belt:'white',  type:'sweep',      links:['cg_cross_collar','cg_flower'] },
          { id:'cg_flower',       name:'Flower Sweep',      belt:'white',  type:'sweep',      links:['cg_scissor'] },
          { id:'cg_cross_collar', name:'Cross Collar Choke',belt:'white',  type:'submission', links:['cg_scissor'] },
          { id:'cg_pendulum',     name:'Pendulum Sweep',    belt:'blue',   type:'sweep',      links:['cg_kimura'] },
          { id:'cg_lumberjack',   name:'Lumberjack Sweep',  belt:'blue',   type:'sweep',      links:['cg_scissor'] },
        ]
      },
      {
        id: 'half_guard', name: 'Half Guard', icon: '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8"/><path d="M12 4a8 8 0 0 1 0 16" fill="currentColor" stroke="none" opacity="0.45"/></svg>', color: '#f97316',
        desc: 'One leg trapped — use underhooks and frames to sweep or recover.',
        techniques: [
          { id:'hg_old_school',   name:'Old School Sweep',  belt:'blue',   type:'sweep',      links:['hg_deep_half','hg_dogfight'] },
          { id:'hg_deep_half',    name:'Deep Half Guard',   belt:'purple', type:'transition', links:['hg_waiter','hg_old_school'] },
          { id:'hg_kimura',       name:'Kimura Trap',       belt:'blue',   type:'submission', links:['hg_old_school'] },
          { id:'hg_z_guard',      name:'Z-Guard / Knee Shield', belt:'white', type:'transition', links:['hg_old_school'] },
          { id:'hg_dogfight',     name:'Dog Fight',         belt:'blue',   type:'transition', links:['hg_back_take','hg_old_school'] },
          { id:'hg_waiter',       name:'Waiter Sweep',      belt:'purple', type:'sweep',      links:['hg_deep_half'] },
          { id:'hg_electric',     name:'Electric Chair',    belt:'purple', type:'submission', links:['hg_waiter'] },
          { id:'hg_back_take',    name:'Back Take',         belt:'blue',   type:'transition', links:['hg_dogfight'] },
          { id:'hg_lockdown',     name:'Lockdown',          belt:'blue',   type:'control',    links:['hg_electric','hg_old_school'] },
        ]
      },
      {
        id: 'open_guard', name: 'Open Guard', icon: '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 5l-6 7 6 7"/><path d="M15 5l6 7-6 7"/></svg>', color: '#8b5cf6',
        desc: 'Dynamic guard systems — De La Riva, butterfly, spider and beyond.',
        techniques: [
          { id:'og_butterfly',    name:'Butterfly Sweep',   belt:'white',  type:'sweep',      links:['og_bf_hook'] },
          { id:'og_bf_hook',      name:'Butterfly Hook',    belt:'white',  type:'control',    links:['og_butterfly','og_dlr'] },
          { id:'og_dlr',          name:'De La Riva Hook',   belt:'blue',   type:'control',    links:['og_dlr_sweep','og_berimbolo'] },
          { id:'og_dlr_sweep',    name:'DLR Sweep',         belt:'blue',   type:'sweep',      links:['og_dlr'] },
          { id:'og_berimbolo',    name:'Berimbolo',         belt:'purple', type:'transition', links:['og_dlr'] },
          { id:'og_spider',       name:'Spider Guard',      belt:'blue',   type:'control',    links:['og_spider_triangle','og_lasso'] },
          { id:'og_spider_triangle', name:'Spider Triangle', belt:'blue',  type:'submission', links:['og_spider'] },
          { id:'og_lasso',        name:'Lasso Guard',       belt:'blue',   type:'control',    links:['og_spider'] },
          { id:'og_xguard',       name:'X-Guard Sweep',     belt:'purple', type:'sweep',      links:['og_xguard_entry'] },
          { id:'og_xguard_entry', name:'X-Guard Entry',     belt:'purple', type:'transition', links:['og_xguard'] },
          { id:'og_tripod',       name:'Tripod Sweep',      belt:'white',  type:'sweep',      links:['og_bf_hook'] },
        ]
      },
      {
        id: 'side_control', name: 'Side Control', icon: '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="9" width="13" height="8" rx="2"/><rect x="9" y="5" width="12" height="8" rx="2"/></svg>', color: '#06b6d4',
        desc: 'Dominant top position — maintain pressure and hunt submissions.',
        techniques: [
          { id:'sc_americana',    name:'Americana',         belt:'white',  type:'submission', links:['sc_kimura'] },
          { id:'sc_kimura',       name:'Kimura',            belt:'white',  type:'submission', links:['sc_americana','sc_ns_choke'] },
          { id:'sc_ns_choke',     name:'North-South Choke', belt:'purple', type:'submission', links:['sc_kimura'] },
          { id:'sc_kesa',         name:'Kesa Gatame',       belt:'white',  type:'control',    links:['sc_americana'] },
          { id:'sc_arm_triangle', name:'Arm Triangle',      belt:'blue',   type:'submission', links:['sc_ns_choke'] },
          { id:'sc_bridge_roll',  name:'Bridge & Roll Escape', belt:'white', type:'escape',   links:['sc_elbow_knee'] },
          { id:'sc_elbow_knee',   name:'Elbow-Knee Escape', belt:'white',  type:'escape',     links:['sc_bridge_roll','sc_granby'] },
          { id:'sc_granby',       name:'Granby Roll',       belt:'blue',   type:'escape',     links:['sc_elbow_knee'] },
          { id:'sc_underhook',    name:'Underhook Escape',  belt:'blue',   type:'escape',     links:['sc_granby'] },
        ]
      },
      {
        id: 'mount', name: 'Mount', icon: '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="7" r="3"/><path d="M7 18c0-3.3 2.2-5.5 5-5.5s5 2.2 5 5.5"/><path d="M4 20h16"/></svg>', color: '#dc2626',
        desc: 'Highest control position — hunt chokes and armbars while defending escapes.',
        techniques: [
          { id:'mt_armbar',       name:'Armbar from Mount', belt:'white',  type:'submission', links:['mt_triangle','mt_s_mount'] },
          { id:'mt_triangle',     name:'Triangle from Mount',belt:'blue',  type:'submission', links:['mt_armbar'] },
          { id:'mt_cross_collar', name:'Cross Collar Choke',belt:'white',  type:'submission', links:['mt_ezekiel','mt_high'] },
          { id:'mt_ezekiel',      name:'Ezekiel Choke',     belt:'white',  type:'submission', links:['mt_cross_collar'] },
          { id:'mt_arm_triangle', name:'Arm Triangle',      belt:'blue',   type:'submission', links:['mt_s_mount'] },
          { id:'mt_s_mount',      name:'S-Mount',           belt:'blue',   type:'control',    links:['mt_armbar','mt_arm_triangle'] },
          { id:'mt_high',         name:'High Mount',        belt:'blue',   type:'control',    links:['mt_cross_collar','mt_ezekiel'] },
          { id:'mt_bridge_roll',  name:'Bridge & Roll Escape', belt:'white', type:'escape',   links:['mt_elbow_knee'] },
          { id:'mt_elbow_knee',   name:'Elbow-Knee Escape', belt:'white',  type:'escape',     links:['mt_bridge_roll'] },
        ]
      },
      {
        id: 'back_control', name: 'Back Control', icon: '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="11" r="4"/><path d="M5 13a8 8 0 0 1 14 0"/><path d="M8 17c1 1.6 2.4 2.5 4 2.5s3-0.9 4-2.5"/></svg>', color: '#1d4ed8',
        desc: 'The most dominant position in BJJ — finish with chokes and arm attacks.',
        techniques: [
          { id:'bc_rnc',          name:'Rear Naked Choke',  belt:'white',  type:'submission', links:['bc_seatbelt'] },
          { id:'bc_bow_arrow',    name:'Bow & Arrow Choke', belt:'blue',   type:'submission', links:['bc_rnc'] },
          { id:'bc_rear_triangle',name:'Rear Triangle',     belt:'purple', type:'submission', links:['bc_bow_arrow'] },
          { id:'bc_seatbelt',     name:'Seatbelt Grip',     belt:'white',  type:'control',    links:['bc_rnc','bc_arm_trap'] },
          { id:'bc_arm_trap',     name:'Arm Trap',          belt:'blue',   type:'submission', links:['bc_seatbelt'] },
          { id:'bc_escape_guard', name:'Escape to Guard',   belt:'white',  type:'escape',     links:['bc_escape_turtle'] },
          { id:'bc_escape_turtle',name:'Escape to Turtle',  belt:'white',  type:'escape',     links:['bc_escape_guard'] },
        ]
      },
      {
        id: 'leg_entanglements', name: 'Leg Entanglements', icon: '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="8.5" cy="12" r="5"/><circle cx="15.5" cy="12" r="5"/></svg>', color: '#059669',
        desc: 'The modern leg lock game — ankle locks, heel hooks and kneebars.',
        techniques: [
          { id:'le_ankle',        name:'Ankle Lock',        belt:'white',  type:'submission', links:['le_ashi'] },
          { id:'le_ashi',         name:'Ashi Garami',       belt:'blue',   type:'control',    links:['le_ankle','le_inside_heel'] },
          { id:'le_inside_heel',  name:'Inside Heel Hook',  belt:'purple', type:'submission', links:['le_ashi','le_50_50'] },
          { id:'le_outside_heel', name:'Outside Heel Hook', belt:'purple', type:'submission', links:['le_outside_ashi'] },
          { id:'le_outside_ashi', name:'Outside Ashi',      belt:'purple', type:'control',    links:['le_outside_heel'] },
          { id:'le_50_50',        name:'50/50 Guard',       belt:'purple', type:'control',    links:['le_inside_heel','le_outside_heel'] },
          { id:'le_kneebar',      name:'Kneebar',           belt:'blue',   type:'submission', links:['le_ashi'] },
          { id:'le_toe_hold',     name:'Toe Hold',          belt:'blue',   type:'submission', links:['le_ashi'] },
          { id:'le_sankaku',      name:'Inside Sankaku',    belt:'purple', type:'control',    links:['le_inside_heel'] },
        ]
      },
      {
        id: 'takedowns', name: 'Takedowns', icon: '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 5l11 9"/><path d="M16 14v-5"/><path d="M16 14h-5"/><path d="M3 20h18"/></svg>', color: '#b45309',
        desc: 'Control where the fight goes — wrestling and judo entries.',
        techniques: [
          { id:'td_single',       name:'Single Leg',        belt:'white',  type:'takedown',   links:['td_double'] },
          { id:'td_double',       name:'Double Leg',        belt:'white',  type:'takedown',   links:['td_single'] },
          { id:'td_osoto',        name:'Osoto Gari',        belt:'white',  type:'takedown',   links:['td_hip_throw'] },
          { id:'td_hip_throw',    name:'Hip Throw (O Goshi)',belt:'white', type:'takedown',   links:['td_osoto','td_seoi'] },
          { id:'td_seoi',         name:'Seoi Nage',         belt:'blue',   type:'takedown',   links:['td_hip_throw'] },
          { id:'td_snap',         name:'Snap Down',         belt:'white',  type:'takedown',   links:['td_guillotine_entry'] },
          { id:'td_sprawl',       name:'Sprawl',            belt:'white',  type:'defense',    links:['td_snap'] },
          { id:'td_guard_pull',   name:'Guard Pull',        belt:'white',  type:'transition', links:['td_single'] },
          { id:'td_guillotine_entry', name:'Guillotine Entry', belt:'white', type:'submission', links:['td_snap'] },
        ]
      }
    ];

    // Skills state
    let currentPosition = null;
    let skillSimulation = null;
    let selectedTechniqueId = null;

    function renderSkills() {
      if (currentPosition) {
        renderTechniqueTree(currentPosition);
      } else {
        renderPositionLevel();
      }
    }

    function renderPositionLevel() {
      const view = document.getElementById('skillsView');

      const sessionsByPos = {};
      cachedSessions.forEach(s => {
        const p = (s.position || '').toLowerCase();
        TECHNIQUE_DB.forEach(pos => {
          if (p.includes(pos.name.toLowerCase().split(' ')[0].toLowerCase())) {
            sessionsByPos[pos.id] = (sessionsByPos[pos.id] || 0) + 1;
          }
        });
      });

      const practicedSubs = new Set(cachedSessions.flatMap(s => (s.submissions_used || []).map(x => x.toLowerCase())));

      const cards = TECHNIQUE_DB.map(pos => {
        const practicedTech = pos.techniques.filter(t =>
          practicedSubs.has(t.name.toLowerCase()) || (sessionsByPos[pos.id] || 0) > 0
        ).length;
        const sessionCount = sessionsByPos[pos.id] || 0;
        return `
          <div class="position-card" style="--pos-color:${pos.color}" onclick="openPosition('${pos.id}')">
            <span class="pos-icon">${pos.icon}</span>
            <div class="pos-name">${pos.name}</div>
            <div class="pos-desc">${pos.desc}</div>
            <div class="pos-meta">
              <span class="pos-count">${pos.techniques.length} techniques</span>
              ${sessionCount > 0 ? `<span class="pos-practiced">${sessionCount} sessions</span>` : ''}
            </div>
          </div>`;
      }).join('');

      view.innerHTML = `
        <div class="skills-view">
          <div class="skills-header">
            <div class="section-title" style="margin:0;">Skill Tree</div>
          </div>
          <div class="positions-grid">${cards}</div>
        </div>`;
    }

    function openPosition(posId) {
      currentPosition = posId;
      renderTechniqueTree(posId);
    }

    function renderTechniqueTree(posId) {
      const view = document.getElementById('skillsView');
      const pos = TECHNIQUE_DB.find(p => p.id === posId);
      if (!pos) return;

      const practicedSubs = new Set(cachedSessions.flatMap(s => (s.submissions_used || []).map(x => x.toLowerCase())));

      const typeColors = {
        submission: '#e63b30', sweep: '#fbbf24', escape: '#4ade80',
        transition: '#c084fc', control: '#67e8f9', takedown: '#fcd34d', defense: '#86efac'
      };

      view.innerHTML = `
        <div class="skills-view">
          <div class="skills-header" style="padding-top:0.25rem;">
            <div>
              <div class="section-title" style="margin:0;display:flex;align-items:center;gap:8px;"><span style="display:inline-flex;color:${pos.color};">${pos.icon}</span>${pos.name}</div>
              <div style="font-size:12px;color:#555;margin-top:2px;">${pos.desc}</div>
            </div>
          </div>
          <div class="tree-legend">
            ${Object.entries(typeColors).map(([type, color]) =>
              `<div class="legend-item"><div class="legend-dot" style="background:${color}"></div>${type}</div>`
            ).join('')}
          </div>
          <div class="tree-container" id="treeContainer">
            <svg class="tree-svg" id="treeSvg"></svg>
          </div>
        </div>`;

      // Show floating back button
      const floatBtn = document.getElementById('skillsBackFloat');
      if (floatBtn) floatBtn.classList.add('visible');

      setTimeout(() => buildD3Tree(pos, practicedSubs, typeColors), 50);
    }

    function buildD3Tree(pos, practicedSubs, typeColors) {
      const container = document.getElementById('treeContainer');
      const svg = d3.select('#treeSvg');
      if (!container || svg.empty()) return;

      const W = container.clientWidth;
      const H = container.clientHeight;

      svg.attr('width', W).attr('height', H);

      const centerNode = { id: pos.id, name: pos.name, isCenter: true, x: W/2, y: H/2, fx: W/2, fy: H/2 };
      const nodes = [centerNode, ...pos.techniques.map(t => ({
        ...t,
        isCenter: false,
        practiced: practicedSubs.has(t.name.toLowerCase())
      }))];

      const links = [];
      pos.techniques.forEach(t => {
        links.push({ source: pos.id, target: t.id });
        (t.links || []).forEach(lid => {
          if (pos.techniques.find(x => x.id === lid)) {
            links.push({ source: t.id, target: lid });
          }
        });
      });

      const zoom = d3.zoom().scaleExtent([0.4, 3]).on('zoom', (e) => {
        g.attr('transform', e.transform);
      });
      svg.call(zoom);

      const g = svg.append('g');

      if (skillSimulation) skillSimulation.stop();
      skillSimulation = d3.forceSimulation(nodes)
        .force('link', d3.forceLink(links).id(d => d.id).distance(d => d.source.isCenter || d.target.isCenter ? 110 : 70).strength(0.6))
        .force('charge', d3.forceManyBody().strength(-280))
        .force('center', d3.forceCenter(W/2, H/2))
        .force('collision', d3.forceCollide().radius(d => d.isCenter ? 40 : 28))
        .on('tick', ticked);

      const link = g.append('g').selectAll('line').data(links).join('line')
        .attr('stroke', 'rgba(255,255,255,0.08)')
        .attr('stroke-width', 1.5);

      const node = g.append('g').selectAll('g').data(nodes).join('g')
        .style('cursor', d => d.isCenter ? 'default' : 'pointer')
        .on('click', (event, d) => { if (!d.isCenter) showTechniqueDetail(d, pos); })
        .call(d3.drag()
          .on('start', (e, d) => { if (!e.active) skillSimulation.alphaTarget(0.3).restart(); if (!d.isCenter) { d.fx = d.x; d.fy = d.y; } })
          .on('drag',  (e, d) => { if (!d.isCenter) { d.fx = e.x; d.fy = e.y; } })
          .on('end',   (e, d) => { if (!e.active) skillSimulation.alphaTarget(0); if (!d.isCenter) { d.fx = null; d.fy = null; } })
        );

      node.append('circle')
        .attr('r', d => d.isCenter ? 36 : 22)
        .attr('fill', d => {
          if (d.isCenter) return pos.color;
          return d.practiced ? pos.color : 'rgba(20,20,20,0.9)';
        })
        .attr('stroke', d => {
          if (d.isCenter) return pos.color;
          return d.practiced ? pos.color : typeColors[d.type] || '#555';
        })
        .attr('stroke-width', d => d.practiced ? 2.5 : 1.5)
        .attr('opacity', d => d.isCenter ? 1 : (d.practiced ? 1 : 0.7));

      node.append('text')
        .attr('text-anchor', 'middle')
        .attr('fill', d => d.isCenter ? 'white' : (d.practiced ? 'white' : '#aaa'))
        .attr('font-size', d => d.isCenter ? 11 : 9)
        .attr('font-weight', d => d.isCenter ? '700' : '500')
        .attr('pointer-events', 'none')
        .each(function(d) {
          const el = d3.select(this);
          const words = d.name.split(' ');
          if (words.length <= 2 || d.isCenter) {
            el.append('tspan').attr('x', 0).attr('dy', d.isCenter ? '0.35em' : (words.length > 1 ? '-0.3em' : '0.35em')).text(words.slice(0, 2).join(' '));
            if (words.length > 2) el.append('tspan').attr('x', 0).attr('dy', '1.1em').text(words.slice(2).join(' '));
          } else {
            el.append('tspan').attr('x', 0).attr('dy', '-0.3em').text(words.slice(0, 2).join(' '));
            el.append('tspan').attr('x', 0).attr('dy', '1.1em').text(words.slice(2).join(' '));
          }
        });

      node.filter(d => !d.isCenter && d.practiced).append('circle')
        .attr('r', 5).attr('cx', 16).attr('cy', -16)
        .attr('fill', '#4ade80').attr('stroke', '#0a0a0a').attr('stroke-width', 1.5);

      function ticked() {
        link
          .attr('x1', d => d.source.x).attr('y1', d => d.source.y)
          .attr('x2', d => d.target.x).attr('y2', d => d.target.y);
        node.attr('transform', d => `translate(${d.x},${d.y})`);
      }
    }

    function closePosition() {
      if (skillSimulation) { skillSimulation.stop(); skillSimulation = null; }
      currentPosition = null;
      closeTechniqueDetail();
      const floatBtn = document.getElementById('skillsBackFloat');
      if (floatBtn) floatBtn.classList.remove('visible');
      renderPositionLevel();
    }

    function showTechniqueDetail(tech, pos) {
      selectedTechniqueId = tech.id;
      const sheet = document.getElementById('techSheet');

      const usedCount = cachedSessions.filter(s =>
        (s.submissions_used || []).map(x => x.toLowerCase()).includes(tech.name.toLowerCase())
      ).length;

      const linkedNames = (tech.links || []).map(lid => {
        const t = pos.techniques.find(x => x.id === lid);
        return t ? `<span class="tech-link-pill" onclick="highlightLinked('${lid}')">${t.name}</span>` : '';
      }).filter(Boolean).join('');

      document.getElementById('techSheetContent').innerHTML = `
        <div class="tech-sheet-handle"></div>
        <div class="tech-sheet-header">
          <div class="tech-sheet-name">${tech.name}</div>
          <button class="tech-sheet-close" onclick="closeTechniqueDetail()">✕</button>
        </div>
        <div class="tech-badges">
          <span class="tech-badge belt-${tech.belt}">${tech.belt} belt</span>
          <span class="tech-badge type-${tech.type}">${tech.type}</span>
        </div>
        <div class="tech-sheet-stat">
          ${usedCount > 0
            ? `You've used this <strong>${usedCount} time${usedCount !== 1 ? 's' : ''}</strong> in logged sessions.`
            : `Not yet logged in your sessions — tap the button below to learn it.`}
        </div>
        ${linkedNames ? `<div class="tech-links-label">Flows to</div><div class="tech-links-row">${linkedNames}</div>` : ''}
        <div id="techLearnArea"></div>
        <button class="tech-learn-btn" id="techLearnBtn" onclick="learnTechnique('${tech.name}', '${pos.name}')">
          What is the ${tech.name}?
        </button>`;

      sheet.classList.add('open');
      const backdrop = document.getElementById('techSheetBackdrop');
      if (backdrop) backdrop.classList.add('open');
    }

    function closeTechniqueDetail() {
      selectedTechniqueId = null;
      const sheet = document.getElementById('techSheet');
      if (sheet) sheet.classList.remove('open');
      const backdrop = document.getElementById('techSheetBackdrop');
      if (backdrop) backdrop.classList.remove('open');
    }

    async function learnTechnique(techName, posName) {
      const learnArea = document.getElementById('techLearnArea');
      const learnBtn = document.getElementById('techLearnBtn');
      if (!learnArea || !learnBtn) return;

      // Show loading state
      learnBtn.style.display = 'none';
      learnArea.innerHTML = `<div class="tech-loading">Loading intro…</div>`;

      try {
        const res = await aiFetch('/api/learn', { techName, posName });

        const data = await res.json();
        const text = data.response || data.error || 'No response received.';

        learnArea.innerHTML = `
          <div class="tech-description">${text.replace(/\n\n/g, '</p><p>').replace(/\n/g, '<br>')}</div>
          <button class="tech-deeper-btn" onclick="askMentorAboutTech('${techName.replace(/'/g, "\\'")}', '${posName.replace(/'/g, "\\'")}')">
            Go deeper with Mentor →
          </button>`;
      } catch (err) {
        learnArea.innerHTML = `<div class="tech-description" style="color:#e63b30;">Couldn't load intro. Check your connection.</div>`;
        learnBtn.style.display = '';
      }
    }

    function askMentorAboutTech(techName, posName) {
      closeTechniqueDetail();
      showView('mentor');
      setTimeout(() => {
        const input = document.getElementById('problem');
        if (input) {
          input.value = `I want to improve my ${techName} from ${posName}. What are the key details, common mistakes, and what should I do if my opponent defends?`;
          input.dispatchEvent(new Event('input'));
          // Auto-submit so the user gets an answer immediately
          const submitBtn = document.getElementById('submitBtn');
          if (submitBtn && !submitBtn.disabled) submitBtn.click();
        }
      }, 300);
    }

    // ── Nemesis ──────────────────────────────────────────────────────────────

    async function loadNemesis() {
      if (!currentUser) return;
      try {
        const { data } = await sb.from('nemesis').select('*').eq('user_id', currentUser.id).order('created_at', { ascending: false });
        if (data) nemesisList = data;
        const { data: rolls } = await sb.from('nemesis_rolls').select('*').eq('user_id', currentUser.id).order('date', { ascending: false });
        if (rolls) {
          nemesisRolls = {};
          rolls.forEach(r => {
            if (!nemesisRolls[r.nemesis_id]) nemesisRolls[r.nemesis_id] = [];
            nemesisRolls[r.nemesis_id].push(r);
          });
        }
      } catch (_) {}
    }

    function nemesisRecord(id) {
      const rolls = nemesisRolls[id] || [];
      return {
        w: rolls.filter(r => r.result === 'win').length,
        l: rolls.filter(r => r.result === 'loss').length,
        d: rolls.filter(r => r.result === 'draw').length,
      };
    }

    function renderNemesisView() {
      const view = document.getElementById('nemesisView');
      if (activeNemesisId) {
        renderNemesisDetail(view);
      } else {
        renderNemesisList(view);
      }
    }

    function renderNemesisList(view) {
      const cards = nemesisList.map(n => {
        const rec = nemesisRecord(n.id);
        const typeLabel = n.type === 'competitor' ? 'Competitor' : 'Partner';
        const typeCls = n.type === 'competitor' ? 'competitor' : 'partner';
        return `<div class="nemesis-card" onclick="openNemesis('${n.id}')">
          <div class="nemesis-card-top">
            <div>
              <div class="nemesis-name">${n.name}</div>
              <div class="nemesis-meta">${n.belt.charAt(0).toUpperCase() + n.belt.slice(1)} belt${n.gym ? ' · ' + n.gym : ''}</div>
            </div>
            <span class="nemesis-type-badge ${typeCls}">${typeLabel}</span>
          </div>
          <div class="nemesis-record">
            <div class="nemesis-record-stat"><div class="val val-w">${rec.w}</div><div class="lbl">Wins</div></div>
            <div class="nemesis-record-stat"><div class="val val-l">${rec.l}</div><div class="lbl">Losses</div></div>
            <div class="nemesis-record-stat"><div class="val val-d">${rec.d}</div><div class="lbl">Draws</div></div>
            <div class="nemesis-record-stat"><div class="val" style="color:#888">${rec.w + rec.l + rec.d}</div><div class="lbl">Rolls</div></div>
          </div>
        </div>`;
      }).join('');

      const empty = nemesisList.length === 0 ? `<div class="nemesis-empty">
        <svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"/></svg>
        No nemesis added yet.<br>Track your rolls and build game plans.
      </div>` : '';

      view.innerHTML = `<div class="nemesis-view">
        <div class="nemesis-header">
          <div class="nemesis-title">Nemesis</div>
          <button class="log-btn" onclick="showAddNemesisForm()">+ Add</button>
        </div>
        <div id="nemesisFormWrap"></div>
        ${empty}${cards}
      </div>`;
    }

    function showAddNemesisForm() {
      const wrap = document.getElementById('nemesisFormWrap');
      if (!wrap) return;
      wrap.innerHTML = `<div class="log-form-wrap" style="margin-bottom:1rem;">
        <div class="log-form-header">
          <span style="font-size:14px;font-weight:600;color:#e0e0e0;">Add Nemesis</span>
          <button onclick="document.getElementById('nemesisFormWrap').innerHTML=''" style="background:none;border:none;color:#666;font-size:18px;cursor:pointer;">✕</button>
        </div>
        <input id="n-name" class="log-input" placeholder="Name" style="margin-bottom:0.5rem;">
        <select id="n-belt" class="log-input" style="margin-bottom:0.5rem;appearance:none;-webkit-appearance:none;">
          <option value="white">White belt</option>
          <option value="blue" selected>Blue belt</option>
          <option value="purple">Purple belt</option>
          <option value="brown">Brown belt</option>
          <option value="black">Black belt</option>
          <option value="unknown">Unknown</option>
        </select>
        <select id="n-type" class="log-input" style="margin-bottom:0.5rem;appearance:none;-webkit-appearance:none;">
          <option value="training_partner">Training Partner</option>
          <option value="competitor">Competitor</option>
        </select>
        <input id="n-gym" class="log-input" placeholder="Gym / Academy (optional)" style="margin-bottom:0.5rem;">
        <textarea id="n-notes" class="log-input" rows="3" placeholder="Notes on their game — guard style, favourite submissions, tendencies..." style="margin-bottom:0.75rem;"></textarea>
        <button class="log-btn" style="width:100%;" onclick="saveNewNemesis()">Save</button>
      </div>`;
    }

    async function saveNewNemesis() {
      if (!currentUser) return;
      const name = document.getElementById('n-name')?.value?.trim();
      if (!name) { alert('Please enter a name.'); return; }
      const entry = {
        user_id: currentUser.id,
        name,
        belt: document.getElementById('n-belt')?.value || 'unknown',
        type: document.getElementById('n-type')?.value || 'training_partner',
        gym: document.getElementById('n-gym')?.value?.trim() || null,
        notes: document.getElementById('n-notes')?.value?.trim() || null,
      };
      const { data, error } = await sb.from('nemesis').insert(entry).select().single();
      if (error) { alert('Could not save: ' + error.message); return; }
      nemesisList.unshift(data);
      renderNemesisView();
    }

    function showEditNemesisForm() {
      const n = nemesisList.find(x => x.id === activeNemesisId);
      const wrap = document.getElementById('nemesisEditWrap');
      if (!n || !wrap) return;
      const beltOpt = b => `<option value="${b}" ${n.belt === b ? 'selected' : ''}>${b.charAt(0).toUpperCase() + b.slice(1)}${b !== 'unknown' ? ' belt' : ''}</option>`;
      wrap.innerHTML = `<div class="log-form-wrap" style="margin-bottom:1rem;">
        <div class="log-form-header">
          <span style="font-size:14px;font-weight:600;color:#e0e0e0;">Edit Nemesis</span>
          <button onclick="document.getElementById('nemesisEditWrap').innerHTML=''" style="background:none;border:none;color:#666;font-size:18px;cursor:pointer;">✕</button>
        </div>
        <input id="n-name" class="log-input" placeholder="Name" value="${esc(n.name)}" style="margin-bottom:0.5rem;">
        <select id="n-belt" class="log-input" style="margin-bottom:0.5rem;appearance:none;-webkit-appearance:none;">
          ${['white','blue','purple','brown','black','unknown'].map(beltOpt).join('')}
        </select>
        <select id="n-type" class="log-input" style="margin-bottom:0.5rem;appearance:none;-webkit-appearance:none;">
          <option value="training_partner" ${n.type !== 'competitor' ? 'selected' : ''}>Training Partner</option>
          <option value="competitor" ${n.type === 'competitor' ? 'selected' : ''}>Competitor</option>
        </select>
        <input id="n-gym" class="log-input" placeholder="Gym / Academy (optional)" value="${esc(n.gym || '')}" style="margin-bottom:0.5rem;">
        <textarea id="n-notes" class="log-input" rows="3" placeholder="Notes on their game — guard style, favourite submissions, tendencies..." style="margin-bottom:0.75rem;">${esc(n.notes || '')}</textarea>
        <button class="log-btn" style="width:100%;" onclick="saveEditedNemesis()">Save changes</button>
      </div>`;
    }

    async function saveEditedNemesis() {
      const n = nemesisList.find(x => x.id === activeNemesisId);
      if (!n || !currentUser) return;
      const name = document.getElementById('n-name')?.value?.trim();
      if (!name) { alert('Please enter a name.'); return; }
      const updates = {
        name,
        belt: document.getElementById('n-belt')?.value || n.belt,
        type: document.getElementById('n-type')?.value || n.type,
        gym: document.getElementById('n-gym')?.value?.trim() || null,
        notes: document.getElementById('n-notes')?.value?.trim() || null,
      };
      const { error } = await sb.from('nemesis').update(updates).eq('id', n.id);
      if (error) { alert('Could not save: ' + error.message); return; }
      Object.assign(n, updates); // future game plans, debriefs, and voice matching all read from this list
      renderNemesisView();
    }

    function openNemesis(id) {
      activeNemesisId = id;
      renderNemesisView();
    }

    function closeNemesisDetail() {
      activeNemesisId = null;
      renderNemesisView();
    }

    function renderNemesisDetail(view) {
      const n = nemesisList.find(x => x.id === activeNemesisId);
      if (!n) { closeNemesisDetail(); return; }
      const rec = nemesisRecord(n.id);
      const rolls = nemesisRolls[n.id] || [];
      const typeLabel = n.type === 'competitor' ? 'Competitor' : 'Training Partner';
      const typeCls = n.type === 'competitor' ? 'competitor' : 'partner';

      const rollItems = rolls.map(r => `<div class="roll-item">
        <div>
          <span class="roll-result ${r.result}">${r.result.charAt(0).toUpperCase() + r.result.slice(1)}</span>
          ${r.notes ? `<div class="roll-notes">${r.notes}</div>` : ''}
        </div>
        <div class="roll-date">${r.date || ''}</div>
      </div>`).join('');

      view.innerHTML = `<div class="nemesis-view">
        <button class="nemesis-detail-back" onclick="closeNemesisDetail()">
          <svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
          All Nemesis
        </button>

        <div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:0.75rem;">
          <div>
            <div class="nemesis-title">${esc(n.name)}</div>
            <div class="nemesis-meta" style="margin-top:4px;">${n.belt.charAt(0).toUpperCase() + n.belt.slice(1)} belt${n.gym ? ' · ' + esc(n.gym) : ''}</div>
          </div>
          <div style="display:flex;flex-direction:column;align-items:flex-end;gap:6px;">
            <span class="nemesis-type-badge ${typeCls}">${typeLabel}</span>
            <button onclick="showEditNemesisForm()" style="background:none;border:0.5px solid rgba(255,255,255,0.15);border-radius:8px;color:#888;font-size:11px;padding:3px 10px;cursor:pointer;font-family:inherit;">Edit</button>
          </div>
        </div>
        <div id="nemesisEditWrap"></div>

        <div class="nemesis-record">
          <div class="nemesis-record-stat"><div class="val val-w">${rec.w}</div><div class="lbl">Wins</div></div>
          <div class="nemesis-record-stat"><div class="val val-l">${rec.l}</div><div class="lbl">Losses</div></div>
          <div class="nemesis-record-stat"><div class="val val-d">${rec.d}</div><div class="lbl">Draws</div></div>
          <div class="nemesis-record-stat"><div class="val" style="color:#888">${rec.w + rec.l + rec.d}</div><div class="lbl">Total</div></div>
        </div>

        ${n.notes ? `<div class="section-title" style="margin-top:1rem;">Their Game</div>
        <div style="font-size:13px;color:#888;line-height:1.6;margin-top:0.25rem;">${esc(n.notes)}</div>` : ''}

        <div class="nemesis-section-title">Log a Roll</div>
        <div class="result-picker">
          <button class="result-pick-btn active-w" id="rpick-win" onclick="setRollResult('win')">Win</button>
          <button class="result-pick-btn" id="rpick-loss" onclick="setRollResult('loss')">Loss</button>
          <button class="result-pick-btn" id="rpick-draw" onclick="setRollResult('draw')">Draw</button>
        </div>
        <textarea id="roll-notes-input" class="log-input" rows="2" placeholder="Quick notes — what worked, what didn't..." style="margin-bottom:0.5rem;"></textarea>
        <input type="date" id="roll-date-input" class="log-input" value="${new Date().toISOString().slice(0,10)}" style="margin-bottom:0.75rem;">
        <button class="log-btn" style="width:100%;margin-bottom:1.25rem;" onclick="saveRoll()">Log Roll</button>

        <div style="display:flex;justify-content:space-between;align-items:center;">
          <div class="nemesis-section-title" style="margin:0;">Game Plan</div>
          <button class="log-btn" style="font-size:12px;padding:0.35rem 0.75rem;" onclick="generateGamePlan()">Generate ↗</button>
        </div>
        <div id="gameplanOutput"></div>

        <div class="nemesis-section-title">Roll History</div>
        <div id="rollHistory">${rollItems || '<div style="color:#444;font-size:13px;padding:0.5rem 0;">No rolls logged yet.</div>'}</div>
      </div>`;

      nemesisRollResult = 'win';
    }

    function setRollResult(result) {
      nemesisRollResult = result;
      document.querySelectorAll('.result-pick-btn').forEach(b => {
        b.className = 'result-pick-btn';
      });
      const map = { win: 'active-w', loss: 'active-l', draw: 'active-d' };
      const btn = document.getElementById('rpick-' + result);
      if (btn) btn.classList.add(map[result]);
    }

    async function saveRoll() {
      if (!currentUser || !activeNemesisId) return;
      const notes = document.getElementById('roll-notes-input')?.value?.trim() || null;
      const date = document.getElementById('roll-date-input')?.value || new Date().toISOString().slice(0,10);
      const { data, error } = await sb.from('nemesis_rolls').insert({
        user_id: currentUser.id,
        nemesis_id: activeNemesisId,
        result: nemesisRollResult,
        notes,
        date,
      }).select().single();
      if (error) { alert('Could not save: ' + error.message); return; }
      if (!nemesisRolls[activeNemesisId]) nemesisRolls[activeNemesisId] = [];
      nemesisRolls[activeNemesisId].unshift(data);
      renderNemesisDetail(document.getElementById('nemesisView'));
    }

    async function generateGamePlan() {
      const n = nemesisList.find(x => x.id === activeNemesisId);
      if (!n) return;
      const output = document.getElementById('gameplanOutput');
      if (!output) return;
      output.innerHTML = '<div class="loading"><div class="dot"></div><div class="dot"></div><div class="dot"></div><span>building game plan...</span></div>';

      const rolls = nemesisRolls[n.id] || [];
      const rec = nemesisRecord(n.id);

      try {
        const res = await aiFetch('/api/gameplan', {
          nemesis: { name: n.name, belt: n.belt, type: n.type, gym: n.gym, notes: n.notes },
          record: rec,
          recentRolls: rolls.slice(0, 10).map(r => ({ result: r.result, notes: r.notes, date: r.date })),
          userProfile: { belt: userProfile.belt, name: userProfile.name, years: userProfile.years },
        });
        const data = await res.json();
        output.innerHTML = `<div class="gameplan-box">${esc(data.gameplan || 'No game plan returned.').replace(/\n/g, '<br>')}</div>`;
      } catch (err) {
        if (err?.isLimit) { output.innerHTML = ''; return; }
        output.innerHTML = `<div class="gameplan-box" style="color:#e63b30;">Couldn't generate the game plan${err?.message ? ` — ${esc(err.message)}` : ''}. Tap Generate to retry.</div>`;
      }
    }

    // Initial view — show dashboard on load (mentorView starts hidden)
    showView('dashboard');

    // ── Roll Timer ────────────────────────────────────────────────────────

    const TIMER_CIRC = 2 * Math.PI * 38; // r=38 on viewBox 0 0 88 88

    const timerState = {
      duration: 360,    // default 6 min
      remaining: 360,
      interval: null,
      roundNum: 1,
      rounds: [],
      running: false,
      roundDone: false,
      warned: false,
    };

    function timerFmt(s) {
      const m = Math.floor(Math.abs(s) / 60);
      const sec = Math.abs(s) % 60;
      return `${m}:${String(sec).padStart(2,'0')}`;
    }

    function openTimerSetup() {
      document.getElementById('timerSetupSheet').classList.add('open');
      document.getElementById('timerSetupBackdrop').classList.add('open');
    }

    function closeTimerSetup() {
      document.getElementById('timerSetupSheet').classList.remove('open');
      document.getElementById('timerSetupBackdrop').classList.remove('open');
    }

    function setTimerPreset(minutes, btn) {
      timerState.duration = minutes * 60;
      document.querySelectorAll('.timer-preset-btn').forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      document.getElementById('timerCustomInput').value = minutes;
    }

    function onTimerCustomChange(val) {
      const m = parseInt(val);
      if (!isNaN(m) && m >= 1 && m <= 90) {
        timerState.duration = m * 60;
        document.querySelectorAll('.timer-preset-btn').forEach(b => b.classList.remove('active'));
      }
    }

    // Unlock the shared AudioContext during a real user tap — iOS refuses to
    // start audio from timer callbacks unless the context was unlocked by a
    // gesture first. Called from the timer Start buttons.
    function unlockAudio() {
      try {
        if (!_audioCtx) _audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        if (_audioCtx.state === 'suspended') _audioCtx.resume();
        // Play one silent sample — the canonical iOS unlock trick
        const buf = _audioCtx.createBuffer(1, 1, 22050);
        const src = _audioCtx.createBufferSource();
        src.buffer = buf;
        src.connect(_audioCtx.destination);
        src.start(0);
      } catch (e) {}
    }

    function beep(freq, dur, vol = 0.55) {
      try {
        const ctx = _audioCtx || (_audioCtx = new (window.AudioContext || window.webkitAudioContext)());
        if (ctx.state === 'suspended') ctx.resume();
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.connect(gain); gain.connect(ctx.destination);
        osc.type = 'sine';
        osc.frequency.value = freq;
        gain.gain.setValueAtTime(vol, ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + dur);
        osc.start(ctx.currentTime);
        osc.stop(ctx.currentTime + dur + 0.05);
      } catch(e) {}
    }

    function playWarning() {
      // 3 quick beeps at 30s left
      beep(880, 0.12, 0.45);
      setTimeout(() => beep(880, 0.12, 0.45), 200);
      setTimeout(() => beep(880, 0.12, 0.45), 400);
    }

    function playRoundEnd() {
      // Air horn: short blast + long blast, synthesized loud for noisy gyms
      airhornBlast(0, 0.55);
      airhornBlast(0.67, 1.25);
    }

    let _audioCtx = null;
    function airhornBlast(startDelay, duration) {
      try {
        const ctx = _audioCtx || (_audioCtx = new (window.AudioContext || window.webkitAudioContext)());
        if (ctx.state === 'suspended') ctx.resume();
        const t0 = ctx.currentTime + startDelay;
        const master = ctx.createGain();
        // Soft-clip stage makes it blare like a compressed horn instead of a sine
        const shaper = ctx.createWaveShaper();
        const curve = new Float32Array(256);
        for (let i = 0; i < 256; i++) {
          const x = (i / 127.5) - 1;
          curve[i] = Math.tanh(2.2 * x);
        }
        shaper.curve = curve;
        master.gain.setValueAtTime(0.0001, t0);
        master.gain.exponentialRampToValueAtTime(1.0, t0 + 0.015);
        master.gain.setValueAtTime(1.0, t0 + duration - 0.06);
        master.gain.exponentialRampToValueAtTime(0.0001, t0 + duration);
        // Brassy harmonic stack on a swooping fundamental
        [[1, 1.0], [2, 0.62], [3, 0.38], [4, 0.22], [5, 0.12]].forEach(([h, amp]) => {
          const osc = ctx.createOscillator();
          const g = ctx.createGain();
          g.gain.value = amp / 2.3;
          osc.frequency.setValueAtTime(310 * h, t0);
          osc.frequency.linearRampToValueAtTime(465 * h, t0 + 0.07);
          osc.connect(g); g.connect(shaper);
          osc.start(t0); osc.stop(t0 + duration);
        });
        shaper.connect(master);
        master.connect(ctx.destination);
      } catch (e) {}
    }

    // ── Native (Capacitor) timer helpers — no-ops on the web ──
    const NativePlugins = (window.Capacitor && window.Capacitor.Plugins) || {};
    async function nativeNotifyPermission() {
      if (!IS_NATIVE || !NativePlugins.LocalNotifications) return false;
      try {
        let status = await NativePlugins.LocalNotifications.checkPermissions();
        if (status.display !== 'granted') {
          status = await NativePlugins.LocalNotifications.requestPermissions();
        }
        return status.display === 'granted';
      } catch (e) { return false; }
    }
    // Android plays notification sounds from a "channel", not the notification
    // itself — create one wired to the bundled air horn (res/raw/airhorn.wav)
    let _hornChannelReady = false;
    async function ensureHornChannel() {
      if (_hornChannelReady || !IS_NATIVE) return;
      if (window.Capacitor.getPlatform?.() !== 'android') { _hornChannelReady = true; return; }
      try {
        await NativePlugins.LocalNotifications.createChannel({
          id: 'roll-timer',
          name: 'Roll Timer',
          description: 'Round-end air horn alerts',
          importance: 5,
          sound: 'airhorn.wav',
          vibration: true,
          visibility: 1
        });
        _hornChannelReady = true;
      } catch (e) {}
    }

    async function nativeScheduleRoundEnd(endAtMs, roundNum) {
      if (!IS_NATIVE || !NativePlugins.LocalNotifications) return;
      try {
        // Await permission BEFORE scheduling — on first use the permission
        // dialog must be answered or the schedule call fails silently
        const granted = await nativeNotifyPermission();
        if (!granted) return;
        await ensureHornChannel();
        await NativePlugins.LocalNotifications.cancel({ notifications: [{ id: 9001 }] }).catch(() => {});
        await NativePlugins.LocalNotifications.schedule({ notifications: [{
          id: 9001,
          title: `Round ${roundNum} complete`,
          body: 'Time! Start the next round or log your session.',
          sound: 'airhorn.caf',    // iOS: bundled air-horn blast
          channelId: 'roll-timer', // Android: channel carries the horn sound
          schedule: { at: new Date(endAtMs), allowWhileIdle: true }
        }] });
      } catch (e) {}
    }
    async function nativeCancelRoundEnd() {
      if (!IS_NATIVE || !NativePlugins.LocalNotifications) return;
      try { await NativePlugins.LocalNotifications.cancel({ notifications: [{ id: 9001 }] }); } catch (e) {}
    }
    function nativeHaptic() {
      if (!IS_NATIVE || !NativePlugins.Haptics) return;
      try { NativePlugins.Haptics.vibrate({ duration: 600 }); } catch (e) {}
    }

    function startTimer() {
      // Read custom input in case user typed without selecting preset
      const customVal = parseInt(document.getElementById('timerCustomInput').value);
      if (!isNaN(customVal) && customVal >= 1) timerState.duration = customVal * 60;

      closeTimerSetup();
      timerState.remaining = timerState.duration;
      timerState.endAt = Date.now() + timerState.duration * 1000;
      timerState.running = true;
      timerState.roundDone = false;
      timerState.warned = false;
      timerState.rounds = [];
      timerState.roundNum = 1;

      unlockAudio(); // user tap = chance to unlock iOS audio for the horn later
      nativeNotifyPermission();
      nativeScheduleRoundEnd(timerState.endAt, timerState.roundNum);

      document.getElementById('rollTimerFab').style.display = 'none';
      document.getElementById('rollTimerPanel').classList.add('visible');
      updateTimerUI();
      timerState.interval = setInterval(tickTimer, 1000);
    }

    function tickTimer() {
      if (!timerState.running) return;
      // Wall-clock based: stays accurate even if the OS throttles JS timers
      // (locked screen, background tab) — recalculates true remaining on every tick
      timerState.remaining = Math.max(0, Math.ceil((timerState.endAt - Date.now()) / 1000));

      if (timerState.remaining <= 30 && timerState.remaining > 0 && !timerState.warned) {
        timerState.warned = true;
        playWarning();
      }
      if (timerState.remaining === 0) {
        timerState.running = false;
        timerState.roundDone = true;
        clearInterval(timerState.interval);
        playRoundEnd();
        nativeHaptic();
      }
      updateTimerUI();
    }

    // When the app returns to the foreground, snap the timer UI to true time immediately
    document.addEventListener('visibilitychange', () => {
      if (!document.hidden && timerState.running) tickTimer();
    });

    function updateTimerUI() {
      const panel = document.getElementById('rollTimerPanel');
      if (!panel) return;
      const { remaining, duration, roundNum, rounds, roundDone, running } = timerState;
      const done = roundDone;
      const warning = !done && remaining <= 30 && remaining > 0;
      const progress = duration > 0 ? remaining / duration : 0;
      const offset = (TIMER_CIRC * (1 - progress)).toFixed(1);
      const ringClass = done ? 'done' : warning ? 'warning' : '';
      const timeClass = done ? 'done' : warning ? 'warning' : '';
      const totalElapsed = rounds.reduce((a, r) => a + r.actual, 0) + (duration - remaining);
      const roundsLabel = rounds.length > 0
        ? `${rounds.length} done · ${timerFmt(totalElapsed)} total`
        : '';

      panel.innerHTML = `
        <div class="timer-panel-top">
          <div class="timer-round-label">Round ${roundNum}</div>
          <div class="timer-total-label">${roundsLabel}</div>
        </div>
        <div class="timer-main">
          <div class="timer-ring-wrap">
            <svg class="timer-ring" viewBox="0 0 88 88">
              <circle class="timer-ring-bg" cx="44" cy="44" r="38"/>
              <circle class="timer-ring-fill ${ringClass}" cx="44" cy="44" r="38"
                stroke-dasharray="${TIMER_CIRC.toFixed(1)}"
                stroke-dashoffset="${offset}"/>
            </svg>
            <div class="timer-ring-text">${timerFmt(remaining)}</div>
          </div>
          <div class="timer-info">
            <div class="timer-big-time ${timeClass}">${timerFmt(remaining)}</div>
            <div class="timer-status-msg">${
              done ? 'Round complete!' :
              warning ? '30 seconds left' :
              `${timerFmt(duration)} rounds`
            }</div>
          </div>
        </div>
        <div class="timer-actions">
          ${done ? `
            <button class="timer-act-btn next" onclick="timerNewRound()">▶ Next Round</button>
            <button class="timer-act-btn primary" onclick="timerDone()">Done Rolling</button>
          ` : `
            <button class="timer-act-btn secondary" onclick="timerCancel()">✕ Cancel</button>
            <button class="timer-act-btn green" onclick="timerDone()">Done Rolling</button>
          `}
        </div>
      `;
    }

    function timerNewRound() {
      timerState.rounds.push({ actual: timerState.duration });
      timerState.roundNum++;
      timerState.remaining = timerState.duration;
      timerState.endAt = Date.now() + timerState.duration * 1000;
      timerState.running = true;
      timerState.roundDone = false;
      timerState.warned = false;
      unlockAudio();
      nativeScheduleRoundEnd(timerState.endAt, timerState.roundNum);
      clearInterval(timerState.interval);
      timerState.interval = setInterval(tickTimer, 1000);
      updateTimerUI();
    }

    function timerDone() {
      clearInterval(timerState.interval);
      timerState.running = false;
      nativeCancelRoundEnd();
      // Log the current round (full if done naturally, partial if stopped early)
      const actual = timerState.roundDone
        ? timerState.duration
        : timerState.duration - timerState.remaining;
      if (actual > 0) timerState.rounds.push({ actual });
      document.getElementById('rollTimerPanel').classList.remove('visible');
      openTimerLog();
    }

    function timerCancel() {
      clearInterval(timerState.interval);
      timerState.running = false;
      nativeCancelRoundEnd();
      timerState.roundDone = false;
      timerState.rounds = [];
      timerState.roundNum = 1;
      document.getElementById('rollTimerPanel').classList.remove('visible');
      document.getElementById('rollTimerFab').style.display = '';
    }

    function openTimerLog() {
      const totalRounds = timerState.rounds.length;
      const totalSecs = timerState.rounds.reduce((a, r) => a + r.actual, 0);
      const totalMin = Math.round(totalSecs / 60);
      const splits = timerState.rounds.map(r => timerFmt(r.actual)).join(' · ');

      // Pre-seed logState so save functions can reuse it
      logState = {
        classType: 'Sparring', position: '', rounds: totalRounds,
        subsUsed: [], subsAgainst: [], sweeps: 0, escapes: 0,
        subPos: { used: {}, against: {} },
      };

      const inner = document.getElementById('timerLogInner');
      inner.innerHTML = `
        <div class="timer-log-handle"></div>
        <div class="timer-log-header">
          <div>
            <div class="timer-log-title">How did it go?</div>
            <div class="timer-log-summary">${totalRounds} round${totalRounds !== 1 ? 's' : ''} · ${totalMin} min · ${splits}</div>
          </div>
          <button class="timer-skip-btn" onclick="timerSkipLog()">Skip & Log</button>
        </div>

        <div class="form-group">
          <div class="form-label">Position</div>
          <div class="pill-group" id="timerPosGroup">
            ${ALL_POSITIONS.map(p => `<button class="log-pill" onclick="timerSetPos('${p}',this)">${p}</button>`).join('')}
          </div>
        </div>

        <div class="form-group">
          <div class="form-label">Submissions used</div>
          <div class="pill-group">
            ${ALL_SUBS.map(s => `<button class="log-pill sub-pill" data-sub="${esc(s)}" data-list="used" onclick="timerToggleSub(this,'used','${esc(s.replace(/'/g,"\\'"))}')">${esc(s)}</button>`).join('')}
          </div>
        </div>

        <div class="form-group">
          <div class="form-label">Submissions against me</div>
          <div class="pill-group">
            ${ALL_SUBS.map(s => `<button class="log-pill sub-pill" data-sub="${esc(s)}" data-list="against" onclick="timerToggleSub(this,'against','${esc(s.replace(/'/g,"\\'"))}')">${esc(s)}</button>`).join('')}
          </div>
        </div>

        <div class="form-group">
          <div class="form-label">Notes (optional)</div>
          <textarea id="timerLogNotes" class="log-input" rows="2" placeholder="Anything worth remembering?"></textarea>
        </div>

        <button class="submit-btn" onclick="timerSaveLog()">Log Session</button>
      `;
      document.getElementById('timerLogSheet').classList.add('open');
      document.body.style.overflow = 'hidden';
    }

    function timerSetPos(p, btn) {
      logState.position = logState.position === p ? '' : p;
      document.querySelectorAll('#timerPosGroup .log-pill').forEach(b => b.classList.remove('active'));
      if (logState.position) btn.classList.add('active');
    }

    function timerToggleSub(btn, list, sub) {
      if (sub === 'Other') {
        const rowId = `timer-custom-sub-row-${list}`;
        const existing = document.getElementById(rowId);
        if (existing) { existing.remove(); return; }
        const row = document.createElement('div');
        row.id = rowId;
        row.className = 'custom-sub-row';
        row.innerHTML = `
          <input id="timer-custom-sub-input-${list}" class="custom-sub-input" type="text" placeholder="e.g. Loop Choke…" maxlength="40"
            onkeydown="if(event.key==='Enter')confirmTimerCustomSub('${list}')">
          <button class="custom-sub-add-btn" onclick="confirmTimerCustomSub('${list}')">Add</button>
          <button class="custom-sub-cancel-btn" onclick="document.getElementById('${rowId}').remove()">✕</button>
        `;
        btn.closest('.form-group').appendChild(row);
        setTimeout(() => document.getElementById(`timer-custom-sub-input-${list}`)?.focus(), 50);
        return;
      }
      const arr = list === 'used' ? logState.subsUsed : logState.subsAgainst;
      const idx = arr.indexOf(sub);
      if (idx >= 0) { arr.splice(idx, 1); btn.classList.remove('active'); }
      else { arr.push(sub); btn.classList.add('active'); }
    }

    function confirmTimerCustomSub(list) {
      const input = document.getElementById(`timer-custom-sub-input-${list}`);
      const name = input?.value?.trim();
      if (!name) return;
      // Save to localStorage if new
      if (!ALL_SUBS.includes(name)) {
        customSubs.push(name);
        try { localStorage.setItem('flowmora_custom_subs', JSON.stringify(customSubs)); } catch(e) {}
        ALL_SUBS = [...BASE_SUBS, ...customSubs, 'Other'];
      }
      // Add to logState selection
      const arr = list === 'used' ? logState.subsUsed : logState.subsAgainst;
      if (!arr.includes(name)) arr.push(name);
      // Insert new pill before "Other" in the pill group
      const pillGroup = input.closest('.form-group').querySelector('.pill-group');
      if (pillGroup) {
        const otherBtn = [...pillGroup.querySelectorAll('.sub-pill')].find(b => b.textContent === 'Other');
        const newBtn = document.createElement('button');
        newBtn.className = 'log-pill sub-pill active';
        newBtn.dataset.sub = name; newBtn.dataset.list = list;
        newBtn.textContent = name;
        const esc = name.replace(/'/g,"\\'");
        newBtn.setAttribute('onclick', `timerToggleSub(this,'${list}','${esc}')`);
        if (otherBtn) pillGroup.insertBefore(newBtn, otherBtn); else pillGroup.appendChild(newBtn);
      }
      // Remove the input row
      document.getElementById(`timer-custom-sub-row-${list}`)?.remove();
    }

    async function timerSaveLog() {
      await _saveTimerSession(document.getElementById('timerLogNotes')?.value?.trim() || '');
    }

    async function timerSkipLog() {
      await _saveTimerSession('');
    }

    async function _saveTimerSession(notes) {
      // Always clean up UI regardless of whether save succeeds
      function cleanup() {
        timerState.rounds = []; timerState.roundNum = 1;
        timerState.roundDone = false; timerState.running = false;
        clearInterval(timerState.interval);
        document.getElementById('timerLogSheet').classList.remove('open');
        document.getElementById('rollTimerPanel').classList.remove('visible');
        document.body.style.overflow = '';
        document.getElementById('rollTimerFab').style.display = '';
      }

      if (!currentUser) { cleanup(); return; }

      const totalSecs = timerState.rounds.reduce((a, r) => a + r.actual, 0);
      const session = {
        id: crypto.randomUUID(),
        user_id: currentUser.id,
        position: logState.position || 'General',
        problem: '', notes,
        date: new Date().toLocaleDateString(),
        drills: [], weakness_flag: '',
        class_type: 'Sparring',
        sweeps: 0, escapes: 0,
        submissions_used: logState.subsUsed,
        submissions_against: logState.subsAgainst,
        rolling_rounds: {
          rounds: timerState.rounds.length,
          wins: 0, losses: 0,
          minutes: Math.round(totalSecs / 60),
          subPos: logState.subPos || { used: {}, against: {} }
        },
        source: 'timer'
      };

      try {
        await sb.from('sessions').insert(session);
        cachedSessions.unshift({ ...session, weaknessFlag: '', strengthFlag: '', rollingRounds: session.rolling_rounds });
        requestDebrief(session); // fire-and-forget AI insight
      } catch(e) {
        console.error('Timer session save failed:', e);
      } finally {
        cleanup();
        renderDashboard();
        showView('progress');
      }
    }
  </script>

  <!-- First-run onboarding -->
  <div id="onboardModal" class="onboard-modal">
    <div class="onboard-card" id="onboardCard"></div>
  </div>

  <!-- Auth modal -->
  <div id="authModal" class="auth-modal">
    <div class="auth-card">
      <img src="/Flowmora.svg" class="auth-logo-img" alt="Flowmora">
      <div class="auth-tagline">your ai mentor on the mats</div>
      <div class="auth-tabs">
        <button class="auth-tab active" onclick="switchAuthTab('signin')">Sign In</button>
        <button class="auth-tab" onclick="switchAuthTab('signup')">Sign Up</button>
      </div>
      <div class="auth-error" id="authError"></div>
      <div class="form-group">
        <label class="form-label">Email</label>
        <input type="email" id="authEmail" class="log-input" placeholder="you@example.com">
      </div>
      <div class="form-group">
        <label class="form-label">Password</label>
        <input type="password" id="authPassword" class="log-input" placeholder="••••••••">
      </div>
      <button class="submit-btn" id="authBtn" onclick="handleAuth()">Sign In</button>
      <div class="auth-success" id="authSuccess"></div>
    </div>
  </div>

  <!-- Log session modal -->
  <div id="logModal" class="video-modal">
    <div class="video-overlay" onclick="hideLogModal()"></div>
    <div class="log-form-wrap" id="logModalInner">
      <!-- content rendered by renderLogModal() -->
    </div>
  </div>

  <!-- Roll Timer FAB -->
  <button class="roll-timer-fab" id="rollTimerFab" onclick="openTimerSetup()">
    Roll Timer
  </button>

  <!-- Timer setup backdrop (tap to dismiss) -->
  <div class="timer-setup-backdrop" id="timerSetupBackdrop" onclick="closeTimerSetup()"></div>

  <!-- Timer setup sheet -->
  <div class="timer-setup-sheet" id="timerSetupSheet">
    <div class="timer-setup-topbar">
      <div class="timer-sheet-handle" style="margin:0;flex:1;"></div>
      <button class="timer-setup-close" onclick="closeTimerSetup()">✕</button>
    </div>
    <div class="timer-duration-label" style="margin-top:0.75rem;">Round duration</div>
    <div class="timer-presets">
      <button class="timer-preset-btn" onclick="setTimerPreset(3,this)">3m</button>
      <button class="timer-preset-btn" onclick="setTimerPreset(5,this)">5m</button>
      <button class="timer-preset-btn active" onclick="setTimerPreset(6,this)">6m</button>
      <button class="timer-preset-btn" onclick="setTimerPreset(7,this)">7m</button>
      <button class="timer-preset-btn" onclick="setTimerPreset(10,this)">10m</button>
    </div>
    <div class="timer-custom-row">
      <span class="timer-custom-label">Custom:</span>
      <input type="number" class="timer-custom-input" id="timerCustomInput" value="6" min="1" max="60" oninput="onTimerCustomChange(this.value)">
      <span class="timer-custom-unit">min</span>
    </div>
    <button class="timer-start-btn" onclick="startTimer()">▶ Start Round 1</button>
  </div>

  <!-- Active timer panel -->
  <div class="roll-timer-panel" id="rollTimerPanel"></div>

  <!-- Post-roll log sheet -->
  <div class="timer-log-sheet" id="timerLogSheet">
    <div class="timer-log-backdrop" onclick="timerSkipLog()"></div>
    <div class="timer-log-inner" id="timerLogInner"></div>
  </div>

  <!-- Achievement toast -->
  <div id="achievementToast">
    <img class="toast-badge-img" id="toastImg" src="" alt="">
    <div class="toast-text">
      <div class="toast-label">Achievement Unlocked</div>
      <div class="toast-name" id="toastName"></div>
      <div class="toast-desc" id="toastDesc"></div>
    </div>
  </div>

  <!-- Bottom navigation -->
  <nav class="bottom-nav" id="bottomNav">
    <button class="nav-item active" id="nav-dashboard" onclick="showView('dashboard')">
      <svg viewBox="0 0 24 24"><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/></svg>
      Home
    </button>
    <button class="nav-item" id="nav-mentor" onclick="showView('mentor')">
      <svg viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/></svg>
      Mentor
    </button>
    <button class="nav-item" id="nav-calendar" onclick="showView('calendar')">
      <svg viewBox="0 0 24 24"><path d="M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z"/></svg>
      Calendar
    </button>
    <button class="nav-item" id="nav-skills" onclick="showView('skills')">
      <svg viewBox="0 0 24 24"><path d="M12 5L5.5 18.5M12 5l6.5 13.5M5.5 18.5h13" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/><circle cx="12" cy="5" r="2.7"/><circle cx="5.5" cy="18.5" r="2.7"/><circle cx="18.5" cy="18.5" r="2.7"/></svg>
      Skills
    </button>
    <button class="nav-item" id="nav-nemesis" onclick="showView('nemesis')">
      <svg viewBox="0 0 24 24"><path d="M14.5 17.5L3 6V3h3l11.5 11.5M13 19l6-6M16 16l4 4M19 21l2-2M14.5 6.5L18 3h3v3l-3.5 4M5 14l4 4M7 17l-3 3M3 19l2 2" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
      Nemesis
    </button>
    <button class="nav-item" id="nav-progress" onclick="showView('progress')">
      <svg viewBox="0 0 24 24"><path d="M5 20H3V10h2v10zm4 0H7V4h2v16zm4 0h-2V8h2v12zm4 0h-2V13h2v7zm4 0h-2v-5h2v5z"/></svg>
      Progress
    </button>
  </nav>

  <!-- Profile modal -->
  <div id="profileModal" class="profile-modal">
    <div class="profile-card">
      <div class="profile-header">
        <div class="profile-title">Your Profile</div>
        <button onclick="closeProfile()" style="background:none;border:none;color:#666;font-size:20px;cursor:pointer;">✕</button>
      </div>
      <div class="form-group">
        <label class="form-label">Display name</label>
        <input type="text" id="profileName" class="log-input" placeholder="e.g. Jerome">
      </div>
      <div class="form-group">
        <label class="form-label">Belt</label>
        <div class="belt-selector">
          <div class="belt-option white" data-belt="white" onclick="selectBelt('white')">White</div>
          <div class="belt-option blue selected" data-belt="blue" onclick="selectBelt('blue')">Blue</div>
          <div class="belt-option purple" data-belt="purple" onclick="selectBelt('purple')">Purple</div>
          <div class="belt-option brown" data-belt="brown" onclick="selectBelt('brown')">Brown</div>
          <div class="belt-option black" data-belt="black" onclick="selectBelt('black')">Black</div>
        </div>
      </div>
      <div class="form-group" style="margin-top:0.5rem;">
        <label class="form-label">Stripes</label>
        <div class="stripe-selector">
          <div class="stripe-sel-dot" onclick="selectStripes(1)" title="1 stripe"></div>
          <div class="stripe-sel-dot" onclick="selectStripes(2)" title="2 stripes"></div>
          <div class="stripe-sel-dot" onclick="selectStripes(3)" title="3 stripes"></div>
          <div class="stripe-sel-dot" onclick="selectStripes(4)" title="4 stripes"></div>
        </div>
        <div style="font-size:11px;color:#444;margin-top:4px;">Tap a dot to set stripes (tap active dot to remove)</div>
      </div>
      <div class="form-group" style="margin-top:1rem;">
        <label class="form-label">Years training</label>
        <input type="number" id="profileYears" class="log-input" placeholder="e.g. 3" min="0" max="50" style="width:100px;">
      </div>
      <div class="form-group">
        <label class="form-label">Academy / gym (optional)</label>
        <input type="text" id="profileGym" class="log-input" placeholder="e.g. Gracie Barra...">
      </div>
      <div class="form-group">
        <label class="form-label">Target promotion date (optional)</label>
        <input type="date" id="profileTargetPromotion" class="log-input">
      </div>
      <div class="form-group" style="margin-top:1rem;">
        <label class="form-label">Weekly training goal</label>
        <div style="display:flex;gap:6px;margin-top:0.4rem;flex-wrap:wrap;">
          <button class="log-pill sub-pill wg-pill" data-goal="1" onclick="selectWeeklyGoal(1)">1</button>
          <button class="log-pill sub-pill wg-pill" data-goal="2" onclick="selectWeeklyGoal(2)">2</button>
          <button class="log-pill sub-pill wg-pill active" data-goal="3" onclick="selectWeeklyGoal(3)">3</button>
          <button class="log-pill sub-pill wg-pill" data-goal="4" onclick="selectWeeklyGoal(4)">4</button>
          <button class="log-pill sub-pill wg-pill" data-goal="5" onclick="selectWeeklyGoal(5)">5</button>
          <button class="log-pill sub-pill wg-pill" data-goal="6" onclick="selectWeeklyGoal(6)">6</button>
          <button class="log-pill sub-pill wg-pill" data-goal="7" onclick="selectWeeklyGoal(7)">7</button>
        </div>
        <div style="font-size:11px;color:#444;margin-top:4px;">Sessions per week</div>
      </div>
      <button class="profile-save-btn" id="profileSaveBtn" onclick="saveProfile()">Save profile</button>
      <div class="profile-saved" id="profileSaved">Profile saved!</div>
    </div>
  </div>

  <!-- Floating skills back button -->
  <button class="skills-back-float" id="skillsBackFloat" onclick="closePosition()">← Back</button>

  <!-- Tech sheet backdrop -->
  <div class="tech-sheet-backdrop" id="techSheetBackdrop" onclick="closeTechniqueDetail()"></div>

  <!-- Tech sheet -->
  <div id="techSheet" class="tech-sheet">
    <div id="techSheetContent"></div>
  </div>

  <!-- Video modal -->
  <div id="videoModal" class="video-modal">
    <div class="video-overlay" onclick="closeVideo()"></div>
    <div class="video-player-wrap">
      <button class="video-close" onclick="closeVideo()">✕</button>
      <div class="video-ratio">
        <iframe id="videoIframe" src=""
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
          allowfullscreen referrerpolicy="strict-origin-when-cross-origin">
        </iframe>
      </div>
    </div>
  </div>
</body>
</html>