/* ── USER AVATAR / LOGIN ── */
  /* .user-avatar, .header-coin-badge, .header-streak-badge and their
     animations are canonical in base.css — only profile-modal-avatar
     base properties live here as they are not repeated in base.css. */
  

  /* ── LOGIN MODAL ── */
  .login-modal { max-width:400px; }
  .login-tabs { display:flex; border-bottom:var(--border-divider); margin-bottom:var(--space-5); }
  .login-tab {
    flex:1; padding:var(--space-3) 0; border:none; background:none;
    font-size:var(--text-base); font-weight:var(--weight-semibold);
    color:var(--stone-dark); cursor:pointer;
    border-bottom:2px solid transparent; transition:all var(--transition-fast);
  }
  .login-tab.active { color:var(--moss); border-bottom-color:var(--moss); }
  .login-tab:hover:not(.active) { color:var(--bark); }
  .input-icon-wrap { position:relative; }
  .input-icon { position:absolute; left:var(--space-3); top:50%; transform:translateY(-50%); font-size:var(--text-md); pointer-events:none; }
  .input-icon-wrap .form-input { padding-left:36px; }

  
  .remember-row input { accent-color:var(--moss); width:15px; height:15px; cursor:pointer; }

  .forgot-link { font-size:var(--text-xs); font-style:italic; color:var(--moss); cursor:pointer; text-decoration:underline; margin-left:auto; }
  .forgot-link:hover { color:var(--moss); }

  .strength-bar { height:var(--space-1); border-radius:4px; margin-top:var(--space-2); background:var(--parchment); overflow:hidden; }
  .strength-fill { height:100%; border-radius:4px; transition: width var(--transition-slow), background var(--transition-slow); width:0; }
/* ── PROFILE MODAL ── */
  .profile-modal-avatar {
    width:var(--avatar-xl); height:var(--avatar-xl);
    font-family:var(--font-display); font-size:var(--text-xl);
    margin:0 auto var(--space-3);
  }
.profile-stat { flex:1; background:var(--cream); border-radius:var(--radius); padding:var(--space-3) var(--space-2); text-align:center; }
.profile-bench-card { animation:none; min-height:72px; }
  .profile-bench-card .mob-bench-card-thumb-shell { width:52px; height:52px; }
  .profile-bench-row { display:flex; align-items:center; gap:var(--profile-bench-gap,12px); }
  .profile-bench-row--compact { --profile-bench-gap:10px; }
  .profile-bench-rating-base { white-space:nowrap; margin-left:auto; flex-shrink:0; }
  .profile-bench-item { padding:var(--space-3); border-radius:var(--radius); border:var(--border-card); cursor:pointer; transition:border-color var(--transition-fast), box-shadow var(--transition-fast); }
  .profile-bench-item:hover { border-color:var(--moss); box-shadow:0 2px 10px var(--shadow); }
  .profile-bench-emoji { font-size:24px; width:36px; text-align:center; flex-shrink:0; }
  .profile-bench-name,.claude-bench-name,.my-bench-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .profile-bench-name { font-weight:var(--weight-semibold); font-size:var(--text-base); }
  .profile-bench-loc { font-size:var(--text-sm); color:var(--stone-dark); }
  .profile-bench-rating { font-size:var(--text-sm); color:var(--gold); font-weight:var(--weight-semibold); }


  /* ── LEVEL SYSTEM ── */
  @keyframes levelBarFill {
    from { width:0; }
  }
  .level-section {
    padding: 14px 20px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .level-row {
    margin-bottom:var(--space-1);
}
  .level-badge {
    font-size:var(--text-sm); letter-spacing:0.3px;
}
.level-bar-wrap {
    height:5px; border-radius:var(--radius-pill);
    background:rgba(255,255,255,0.08);
    overflow:hidden; margin-bottom:14px;
  }
  .level-bar {
    height:100%; border-radius:var(--radius-pill);
    animation: levelBarFill 1.2s cubic-bezier(0.4,0,0.2,1) both 0.3s;
  }
  .level-bar.blue  { background:linear-gradient(90deg,#0d9ec4,#47ceff); }
  .level-bar.orange{ background:linear-gradient(90deg,#cc785c,#e8a882); }
  .level-bar.green { background:linear-gradient(90deg,var(--moss),var(--moss-light)); }

  .profile-user-tag {
      padding:var(--space-1) var(--space-3); border-radius:var(--radius-pill);
      margin:var(--space-1);
}

  /* ── GOOGLE SIGN IN ── */
  .btn-google {
  border:var(--btn-style-border-width) solid var(--moss-t20);
  background:var(--moss-t08);
  color: var(--moss);
  border-radius: var(--btn-style-radius);
  padding: var(--space-3) var(--space-4);
  transition: background var(--transition-base), border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}
.btn-google:hover {
  background:var(--moss-t15);
  border-color:var(--moss-t20);
  transform: translateY(-2px);
  box-shadow: var(--btn-style-shadow-hover);
}
  .btn-google svg { width:18px; height:18px; flex-shrink:0; }
  /* streakPop, streakGlow, .header-streak-badge.popping,
     .streak-count-num/label are canonical in base.css */

  .login-divider {
    margin:var(--space-3) 0;
}
  .login-divider::before, .login-divider::after {
    content:''; flex:1; height:1px; background:var(--parchment);
  }


  /* ── PROFILE TAGS ── */
  .profile-user-tag {
    background:rgba(71,206,255,0.12); border:1px solid rgba(71,206,255,0.3);
    color:rgba(71,206,255,0.9);
}
  .profile-tag-picker-item {
    padding:var(--space-1) var(--space-3); border-radius:var(--radius-pill); font-size:var(--text-sm); font-weight:var(--weight-semibold);
    border:var(--border-card); background:var(--white); cursor:pointer;
    transition:all var(--transition-fast); color:var(--stone-dark);
  }
  .profile-tag-picker-item.selected { background:var(--moss); color:white; border-color:var(--moss); }
  .profile-tag-picker-item.locked { opacity:0.3; cursor:not-allowed; }