:root{
    --bg:#0A0E1A; --surface:#121A2B; --surface2:#182236; --border:rgba(255,255,255,0.08);
    --text:#EDF1F7; --dim:#8B96AC; --accent:#00E5A0; --accent2:#FF6B5D; --accent3:#FFB020; --accentb:#4C8DFF;
    --shadow: 0 8px 32px rgba(0,0,0,0.35);
  }
  [data-theme="light"]{
    --bg:#F3F5F9; --surface:#FFFFFF; --surface2:#EDF1F7; --border:rgba(10,14,26,0.08);
    --text:#0A0E1A; --dim:#5B6472; --shadow: 0 8px 28px rgba(20,30,60,0.08);
  }
  *{box-sizing:border-box;}
  html, body{max-width:100%; overflow-x:hidden;}
  body{
    margin:0; background:var(--bg); color:var(--text);
    font-family:'Inter',sans-serif; transition:background .3s ease,color .3s ease;
    -webkit-font-smoothing:antialiased;
  }
  .num{font-family:'Space Grotesk',sans-serif; font-variant-numeric: tabular-nums;}
  .mono{font-family:'JetBrains Mono',monospace;}
  .app{display:flex; min-height:100vh;}

  /* SIDEBAR */
  .sidebar{
    width:230px; flex-shrink:0; background:var(--surface); border-right:1px solid var(--border);
    padding:28px 18px; display:flex; flex-direction:column; gap:6px; position:sticky; top:0; height:100vh;
  }
  .logo{display:flex; align-items:center; gap:10px; padding:0 10px 24px 10px;}
  .logo-mark{width:36px; height:36px; border-radius:10px; position:relative; flex-shrink:0;}
  .logo-mark img{width:100%; height:100%; object-fit:contain;}
  .logo-text{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:17px; letter-spacing:-0.02em;}

  /* Profile avatar — sits below the logo, opens the Profile tab */
  .sidebar-avatar-btn{
    display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%;
    background:var(--surface2); border:2px solid transparent; margin:0 0 18px 10px; padding:0; cursor:pointer;
    overflow:hidden; flex-shrink:0; transition:border-color .2s ease;
  }
  .sidebar-avatar-btn:hover{border-color:var(--border);}
  .sidebar-avatar-btn.active{border-color:var(--accent);}
  .sidebar-avatar-btn img{width:100%; height:100%; object-fit:cover; border-radius:50%;}
  .sidebar-avatar-btn span{font-size:15px;}
  .navbtn{
    display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:12px; border:none;
    background:transparent; color:var(--dim); font-family:'Inter',sans-serif; font-size:14px; font-weight:500;
    cursor:pointer; text-align:left; transition:all .2s ease; width:100%;
  }
  .navbtn:hover{background:var(--surface2); color:var(--text);}
  .navbtn.active{background:var(--surface2); color:var(--accent);}
  .navbtn svg{flex-shrink:0;}
  .sidebar-foot{margin-top:auto; padding:14px 10px; border-top:1px solid var(--border); font-size:12px; color:var(--dim);}

  /* MAIN */
  .main{flex:1; padding:28px 36px 60px; max-width:1240px;}
  .topbar{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:22px; flex-wrap:wrap; gap:16px;}
  .greeting-eyebrow{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); margin-bottom:4px;}
  .greeting{font-family:'Space Grotesk',sans-serif; font-size:28px; font-weight:700; letter-spacing:-0.02em;}
  .topbar-right{display:flex; align-items:center; gap:12px;}
  .streak-pill{
    display:flex; align-items:center; gap:7px; background:var(--surface); border:1px solid var(--border);
    padding:8px 14px; border-radius:999px; font-size:13px; font-weight:600;
  }
  .theme-toggle{
    width:42px; height:42px; border-radius:12px; border:1px solid var(--border); background:var(--surface);
    display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text);
  }

  /* PULSE DIVIDER — signature element */
  .pulse-wrap{width:100%; height:38px; margin:4px 0 26px 0; overflow:hidden; opacity:.9;}
  .pulse-wrap svg{width:100%; height:100%; display:block;}
  .pulse-line{stroke:var(--accent); stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round;
    stroke-dasharray:8 6; animation:dash 1.4s linear infinite;}
  @keyframes dash{to{stroke-dashoffset:-28;}}

  .tabpanel{display:none;}
  .tabpanel.active{display:block; animation:fadeIn .35s ease;}
  @keyframes fadeIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

  /* CARDS */
  .grid{display:grid; gap:16px;}
  .grid-stats{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));}
  .grid-2-1{grid-template-columns:2fr 1fr;}
  .grid-1-1{grid-template-columns:1fr 1fr;}
  .card{
    background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:18px 20px;
    backdrop-filter:blur(20px); box-shadow:var(--shadow); position:relative; overflow:hidden;
  }
  .card::before{content:''; position:absolute; top:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);}
  .stat-label{font-size:12px; color:var(--dim); font-weight:500; margin-bottom:10px; display:flex; justify-content:space-between; align-items:center;}
  .stat-value{font-size:26px; font-weight:700; letter-spacing:-0.01em;}
  .stat-sub{font-size:12px; color:var(--dim); margin-top:6px;}
  .bar-track{width:100%; height:6px; border-radius:99px; background:var(--surface2); margin-top:10px; overflow:hidden;}
  .bar-fill{height:100%; border-radius:99px;}

  .section-title{font-family:'Space Grotesk',sans-serif; font-size:19px; font-weight:700; margin:34px 0 14px; letter-spacing:-0.01em;}
  .section-title:first-child{margin-top:0;}

  .quote-card{
    background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), var(--surface));
    border:1px solid var(--border); border-radius:18px; padding:22px 24px; margin-top:18px;
  }
  .quote-card p{font-family:'Space Grotesk',sans-serif; font-size:17px; margin:0 0 4px; font-weight:500;}
  .quote-card span{font-size:12px; color:var(--dim);}

  .badge-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:14px;}
  .badge{
    display:flex; flex-direction:column; align-items:center; gap:6px; width:78px; text-align:center;
  }
  .badge-icon{width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center;
    background:var(--surface2); border:1px solid var(--border);}
  .badge-icon.unlocked{background:linear-gradient(135deg,var(--accent),var(--accentb)); color:#031A12;}
  .badge span{font-size:10.5px; color:var(--dim); font-weight:500;}

  /* Rings */
  .ring-row{display:flex; gap:22px; flex-wrap:wrap;}
  .ring-item{display:flex; flex-direction:column; align-items:center; gap:8px; width:110px;}
  .ring-item span{font-size:12px; color:var(--dim); text-align:center;}
  .ring-item b{font-size:15px; font-weight:700;}

  /* Muscle group grid */
  .muscle-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));}
  .muscle-card{cursor:pointer; transition:transform .2s ease, border-color .2s ease;}
  .muscle-card:hover{transform:translateY(-3px); border-color:var(--accent);}
  .muscle-icon{width:100%; height:96px; border-radius:12px; background:var(--surface2); display:flex; align-items:center; justify-content:center; margin-bottom:12px;}
  .muscle-name{font-weight:600; font-size:15px;}
  .muscle-meta{font-size:12px; color:var(--dim); margin-top:4px;}
  .tag{display:inline-block; font-size:11px; padding:2px 8px; border-radius:99px; background:var(--surface2); color:var(--dim); margin-top:8px;}

  /* Exercise video gallery */
  .video-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}
  .video-card video{width:100%; aspect-ratio:16/10; border-radius:12px; background:#000; display:block; object-fit:cover;}
  .video-card-name{font-weight:600; font-size:14.5px; margin-top:12px;}
  .video-card-meta{font-size:12px; color:var(--dim); margin-top:3px;}
  .video-missing{
    width:100%; aspect-ratio:16/10; border-radius:12px; background:var(--surface2); border:1px dashed var(--border);
    display:flex; align-items:center; justify-content:center; text-align:center; color:var(--dim); font-size:12.5px; padding:14px;
  }

  /* Exercise detail */
  .exercise-row{
    display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-radius:14px;
    background:var(--surface2); margin-bottom:10px; cursor:pointer; border:1px solid transparent;
  }
  .exercise-row:hover{border-color:var(--border);}
  .exercise-name{font-weight:600; font-size:14.5px;}
  .exercise-meta{font-size:12px; color:var(--dim); margin-top:3px;}
  .diff-pill{font-size:11px; padding:3px 10px; border-radius:99px; font-weight:600;}
  .diff-Beginner{background:rgba(0,229,160,.15); color:var(--accent);}
  .diff-Intermediate{background:rgba(255,176,32,.15); color:var(--accent3);}
  .diff-Advanced{background:rgba(255,107,93,.15); color:var(--accent2);}

  .detail-box{display:none; margin-top:8px; padding:16px 18px; border-radius:14px; background:var(--surface2); border:1px solid var(--border); font-size:13.5px; line-height:1.6; color:var(--dim);}
  .detail-box.open{display:block; animation:fadeIn .25s ease;}
  .detail-box b{color:var(--text);}
  .detail-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px;}

  /* Forms */
  label{font-size:12.5px; color:var(--dim); font-weight:500; display:block; margin-bottom:6px;}
  input, select{
    width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:var(--surface2);
    color:var(--text); font-family:'Inter',sans-serif; font-size:14px; margin-bottom:14px;
  }
  input:focus, select:focus{outline:2px solid var(--accent); outline-offset:1px;}
  .field-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px;}
  button.primary{
    background:linear-gradient(135deg,var(--accent),var(--accentb)); color:#031A12; border:none; padding:11px 20px;
    border-radius:12px; font-weight:700; font-size:14px; cursor:pointer; transition:opacity .2s;
  }
  button.primary:hover{opacity:.88;}
  button.ghost{
    background:transparent; border:1px solid var(--border); color:var(--text); padding:8px 14px; border-radius:10px;
    font-size:13px; cursor:pointer; font-weight:500;
  }
  .result-box{
    margin-top:6px; padding:16px 18px; border-radius:14px; background:var(--surface2); border:1px solid var(--border);
    display:none;
  }
  .result-box.show{display:block; animation:fadeIn .3s ease;}
  .result-num{font-size:30px; font-weight:700;}
  .result-label{font-size:12px; color:var(--dim); margin-top:2px;}

  .calc-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
  .calc-card h3{font-family:'Space Grotesk',sans-serif; font-size:16px; margin:0 0 14px;}

  /* Nutrition */
  .macro-ring-row{display:flex; gap:24px; flex-wrap:wrap; align-items:center;}
  .food-table{width:100%; border-collapse:collapse; font-size:13.5px;}
  .table-scroll{width:100%; overflow-x:auto;}
  .food-table th{text-align:left; color:var(--dim); font-weight:500; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; padding:8px 10px; border-bottom:1px solid var(--border);}
  .food-table td{padding:10px; border-bottom:1px solid var(--border);}
  .food-table tr:last-child td{border-bottom:none;}
  .add-food-btn{background:var(--surface2); border:1px solid var(--border); color:var(--accent); padding:5px 10px; border-radius:8px; font-size:12px; cursor:pointer; font-weight:600;}

  .searchbar{position:relative; margin-bottom:16px;}
  .searchbar input{padding-left:38px;}
  .searchbar svg{position:absolute; left:12px; top:12px; color:var(--dim);}

  ::-webkit-scrollbar{width:8px;}
  ::-webkit-scrollbar-thumb{background:var(--border); border-radius:8px;}

  /* ONBOARDING MODAL */
  .onboard-overlay{
    position:fixed; inset:0; background:rgba(4,7,14,0.72); backdrop-filter:blur(6px);
    display:flex; align-items:center; justify-content:center; z-index:200; padding:20px;
  }
  .onboard-card{
    background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:28px 30px;
    max-width:560px; width:100%; max-height:88vh; overflow-y:auto; box-shadow:var(--shadow);
  }
  .onboard-card h2{font-family:'Space Grotesk',sans-serif; font-size:22px; margin:0 0 4px; letter-spacing:-0.01em;}
  .onboard-card p.onboard-sub{font-size:13px; color:var(--dim); margin:0 0 22px;}
  .onboard-card label{margin-top:2px;}
  .onboard-note{font-size:11.5px; color:var(--dim); margin:-8px 0 16px;}

  /* AUTH */
  .auth-divider{display:flex; align-items:center; gap:10px; margin:14px 0; color:var(--dim); font-size:12px;}
  .auth-divider::before, .auth-divider::after{content:''; flex:1; height:1px; background:var(--border);}
  .google-btn{
    background:#fff; color:#1f1f1f; border:1px solid var(--border); padding:11px 20px; border-radius:12px;
    font-weight:600; font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center;
    gap:10px; width:100%; transition:opacity .2s;
  }
  .google-btn:hover{opacity:.88;}
  .auth-note{font-size:11.5px; color:var(--dim); margin-top:16px; text-align:center;}
  .user-chip{
    display:none; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border);
    padding:5px 12px 5px 5px; border-radius:999px;
  }
  .user-chip img{width:26px; height:26px; border-radius:50%; display:block;}
  .user-chip span{font-size:13px; font-weight:600; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .sync-note{font-size:11px; color:var(--dim); display:flex; align-items:center; gap:5px;}
  .sync-dot{width:6px; height:6px; border-radius:50%; background:var(--accent);}

  @keyframes spin{ to{ transform:rotate(360deg); } }

  @media(max-width:860px){
    :root{ --mobile-navbar-h:64px; }

    /* Sidebar becomes a bottom nav bar instead of hugging the left edge */
    .sidebar{position:fixed; left:0; right:0; bottom:0; top:auto; width:100%; height:var(--mobile-navbar-h);
      flex-direction:row; justify-content:space-around; align-items:stretch; overflow-x:auto; overflow-y:hidden;
      padding:6px 4px; gap:0; border-right:none; border-top:1px solid var(--border); z-index:50;}

    /* Logo pins to the top-left corner of the viewport, independent of the bottom bar */
    .sidebar .logo{position:fixed; top:14px; left:14px; flex-direction:column; align-items:center;
      gap:4px; padding:0; text-align:center; z-index:55;}
    .sidebar .logo-mark{width:32px; height:32px;}
    .sidebar .logo-text{display:none;}

    /* Profile avatar sits pinned just below the logo, top-left */
    .sidebar-avatar-btn{position:fixed; top:56px; left:16px; margin:0; z-index:55;}

    .sidebar-foot{display:none;}
    .navbtn{flex:1 1 0; flex-direction:column; font-size:9px; padding:6px 2px; gap:3px;
      text-align:center; white-space:normal; min-width:0;}
    .navbtn svg{width:17px; height:17px;}
    .main{flex:none; width:100%; max-width:none; margin-left:0;
      padding:104px 14px calc(var(--mobile-navbar-h) + 24px); box-sizing:border-box;}
    .ai-fab{right:16px; bottom:calc(var(--mobile-navbar-h) + 16px);}
    .ai-chat-panel{right:16px; bottom:calc(var(--mobile-navbar-h) + 86px); width:calc(100vw - 32px);
      height:min(480px, calc(100vh - var(--mobile-navbar-h) - 130px));}
    .grid-2-1, .grid-1-1{grid-template-columns:1fr;}
    .grid-stats{grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));}
    .muscle-grid{grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr));}
    .video-grid{grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));}
    .calc-grid{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));}
    .field-grid{grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr));}
    .detail-grid{grid-template-columns:1fr;}
  }
  /* ===================== AI COACH (added) ===================== */
  .coach-score-card{
    display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  }
  .coach-score-ring{position:relative; width:120px; height:120px; flex-shrink:0;}
  .coach-score-ring svg{transform:rotate(-90deg);}
  .coach-score-num{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    flex-direction:column; font-family:'Space Grotesk',sans-serif;
  }
  .coach-score-num b{font-size:30px; line-height:1;}
  .coach-score-num span{font-size:11px; color:var(--dim); margin-top:2px;}
  .coach-rec-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
  .coach-rec-list li{
    background:var(--surface2); border:1px solid var(--border); border-radius:10px;
    padding:10px 14px; font-size:13.5px; display:flex; gap:10px; align-items:flex-start;
  }
  .coach-rec-list li::before{content:"→"; color:var(--accent); flex-shrink:0; font-weight:700;}
  .coach-loading{color:var(--dim); font-size:13px; padding:8px 0;}
  .coach-empty{color:var(--dim); font-size:13px;}
  .coach-refresh-row{display:flex; justify-content:flex-end; margin-bottom:-8px;}

  /* Floating AI chat button */
  .ai-fab{
    position:fixed; right:26px; bottom:26px; width:58px; height:58px; border-radius:50%;
    background:linear-gradient(135deg,var(--accent),var(--accentb)); border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); z-index:60;
    color:#031A12; transition:transform .15s ease;
  }
  .ai-fab:hover{transform:scale(1.06);}
  .ai-fab-badge{
    position:absolute; top:-2px; right:-2px; width:14px; height:14px; border-radius:50%;
    background:var(--accent2); border:2px solid var(--bg); display:none;
  }

  /* Chat panel */
  .ai-chat-panel{
    position:fixed; right:26px; bottom:96px; width:360px; max-width:calc(100vw - 32px);
    height:480px; max-height:calc(100vh - 140px); background:var(--surface); border:1px solid var(--border);
    border-radius:16px; box-shadow:var(--shadow); z-index:60; display:none; flex-direction:column; overflow:hidden;
  }
  .ai-chat-panel.open{display:flex;}
  .ai-chat-head{
    padding:14px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center;
    justify-content:space-between; flex-shrink:0;
  }
  .ai-chat-head b{font-family:'Space Grotesk',sans-serif; font-size:14.5px;}
  .ai-chat-head span{font-size:11.5px; color:var(--dim); display:block; margin-top:1px;}
  .ai-chat-close{background:none; border:none; color:var(--dim); font-size:18px; cursor:pointer; line-height:1; padding:4px;}
  .ai-chat-body{flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:10px;}
  .ai-msg{max-width:85%; padding:9px 12px; border-radius:12px; font-size:13px; line-height:1.45;}
  .ai-msg.user{align-self:flex-end; background:var(--accentb); color:#fff; border-bottom-right-radius:3px;}
  .ai-msg.ai{align-self:flex-start; background:var(--surface2); border:1px solid var(--border); border-bottom-left-radius:3px;}
  .ai-msg.ai.pending{color:var(--dim); font-style:italic;}
  .ai-chat-foot{
    display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--border); flex-shrink:0;
  }
  .ai-chat-foot input{
    flex:1; background:var(--surface2); border:1px solid var(--border); border-radius:10px;
    padding:9px 12px; font-family:'Inter',sans-serif; font-size:13px; color:var(--text);
  }
  .ai-chat-foot button{
    background:var(--accent); border:none; border-radius:10px; padding:0 14px; cursor:pointer;
    color:#031A12; font-weight:600; font-size:13px;
  }
  .ai-chat-foot button:disabled{opacity:0.5; cursor:default;}